![](/img/trans.png)
[英]Get JavaScript slideToggle to close active div when opening another one?
[英]How do I get a currently visible (default hidden) slideToggle() .div to close when another is opened?
因此,我已经接近要实现的目标,包括在单击“链接” divs(.click,.click2)中的任意位置时关闭slideToggle .divs,但有一个明显的例外...
当我单击“链接1”时,它会执行我想要的操作并显示.showup,然后,如果我单击“链接2”,则它最初还会执行我的操作,并显示.showup2而不是.showup,但我需要.showup才能关闭。他们不是同时打开的。
如您在我提供的代码中看到的那样,如果我再次直接单击“链接1”,则会出现两个“ showup” div已经打开的问题。showup仍然隐藏在.showup2后面。
同样,在上面的示例中,如果我先单击“链接2”,则打开.showup2,但是当我直接单击“链接1”时,.showup不会出现在.showup2上方
因此,最终,我希望我的slideToggle div隐藏在我的“链接” div(.click和.click2)之外的任何位置(当前它会这样做),但是ANYWHERE应该包括我的其他脚本指示的“链接” div! 这就是我感到难过的地方。
这是在一个非常简化的示例中演示的代码:
的HTML
<div class="click">Link 1</div> <div class="click2">Link 2</div>
<div class="showup">something I want to show</div>
<div class="showup2">something else I want to show</div>
脚本
$(document).ready(function(){
$('.click').click(function(event){
event.stopPropagation();
$(".showup").slideToggle("fast");
});
});
$(document).on("click", function () {
$(".showup").hide();
});
$(document).ready(function(){
$('.click2').click(function(event){
event.stopPropagation();
$(".showup2").slideToggle("fast");
});
});
$(document).on("click", function () {
$(".showup2").hide();
});
的CSS
body{margin:50px;}
.showup,
.showup2 { width:100%;height:100px; background:red; display:none; position: fixed;}
.click,
.click2 { cursor:pointer; display:inline-block; padding: 0 15px;}
非常感谢您的帮助! 朱莉
您可以使用相同的button
和boxes
class
名。 data-target
attr用于将哪个元素切换为目标。
更新
Bold
文本切换功能 $(document).ready(function() { $('.click').click(function(event) { event.stopPropagation(); if($(".showup").eq($(this).attr('data-target')).css('display') == 'block'){ $(".showup").eq($(this).attr('data-target')).slideUp(); $('.click').removeClass('bold') } else{ $(".showup").hide(); $('.click').removeClass('bold') $(".showup").eq($(this).attr('data-target')).slideToggle("fast"); $(this).toggleClass('bold') } }); }).on('click',function(){ $(".showup").hide(); $('.click').removeClass('bold') })
body { margin: 50px; } .showup{ width: 100%; height: 100px; background: red; display: none; position: fixed; } .bold{ font-weight:bold; } .click{ cursor: pointer; display: inline-block; padding: 0 15px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="click" data-target="0">Link 1</div> <div class="click" data-target="1">Link 2</div> <div class="showup">something I want to show</div> <div class="showup">something else I want to show</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.