Question

使用幻灯片切换向下滑动div工作正常[借助堆栈溢出的朋友]，现在我面临另一个问题，我想关闭切换的div当我点击其他div也有切换功能。

<div id="click" data-class="slide" class="toggle">Toggle</div>
<div class="slide" id="slide" data-class="slide" style="display:none;">
<p>name 1</p>
<p>name 2</p>
<p>name 3</p>
</div>
<div data-class="slide1" class="toggle">Toggle</div>
<div class="slide1" style="display:none;">
<p>name 1</p>
<p>name 2</p>
<p>name 3</p>
</div>
<div data-class="slide2" class="toggle">Toggle</div>
<div class="slide2" style="display:none;">
<p>name 1</p>
<p>name 2</p>
<p>name 3</p>
</div>


<script>
   $(document).ready(function(){
   $( ".toggle" ).click(function() {
   var tog = $(this).("data-class");
   $("."+tog).slideToggle( "fast", function() {
   });
   });
   });
</script>

例如：单击带有属性数据类的div时，它切换相应类名的div，我点击另一个div，它切换相应的div，但我想切换上一个切换的div

Answer 1

由于您将切换先前打开的div，我假设您在任何时候只能切换一个div，您可以尝试这样的事情：

$(document).ready(function(){
    $( ".toggle" ).click(function() {
        if ($(this).next().is(":visible"))
            $(this).next().slideToggle("fast");
        else {
            $(".toggle").each(function() {
                if ($(this).next().is(":visible"))
                    $(this).next().slideToggle("fast");
            });

            var tog = $(this).attr("data-class");
            $("."+tog).slideToggle("fast");
        }
    });
});

因此，每次使用“toggle”类单击div时，它将使用“toggle”类迭代所有其他div，检查它是否可见，如果是，则将其切换为关闭。

修改将更改记录到单击已经切换（显示）的div，以关闭它。可能有一种更好的逻辑/算法方法来处理这个问题，但目前它确实“如果当前列表可见，关闭它并移动一个，否则如果它是未打开的，则切换打开的一个并切换刚刚单击的一个节目”。

如何隐藏在单击其他div时切换的前一个div

1 个答案: