单击时折叠其他 Div

Question

.notshow 类默认是隐藏的，我希望 .notshow 类的 div 在单击 .shownow 类中的 Show It 文本后可见。 我创建了一个 jquery 代码，但它不工作。 当我单击 .shownow div 时，所有具有 .notshow 类的隐藏 div 都可见。 我只希望一个带有 .notshow 类的 div 可见。

示例：我想显示具有 .notshow 类的单个 div 可见，如果我单击另一个 div，则应该隐藏前一个 div。 它类似于手风琴。

*我在互联网上搜索了很多，但找不到任何类似的解决方案。 感谢您的帮助

JsFiddle：https://jsfiddle.net/yoxo5kfh/3/

<div class="data">

<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>

<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>


<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>

</div>

Answer 1

为此，我们必须针对您要show的那个，我们可以通过组合来定位它..

1. $(this) - 您点击的元素。
2. .closest - 两个元素的父级。
3. 如果你想要一些动画使用.slideDown insted of .show() 和.slideUp insted of .hide()

$('body').on('click', '.shownow', function() {
  $('.notshow').removeClass('nohide');
  $(this).closest('.main').find('.notshow').addClass('nohide').toggle();
  $('.notshow').each(function() {
    if(!$(this).hasClass('nohide')){
       $(this).hide();
    }
  });

});

.notshow {
  display: none;
}

.catlist {
  list-style: none;
}

.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">

  <div class="main">
    <div class="title">
      <div class="shownow">
        <h4>Show It</h4>
      </div>
    </div>
    <div class="notshow">
      <ul class="catlist">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
    </div>
  </div>

  <div class="main">
    <div class="title">
      <div class="shownow">
        <h4>Show It</h4>
      </div>
    </div>
    <div class="notshow">
      <ul class="catlist">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
    </div>
  </div>


  <div class="main">
    <div class="title">
      <div class="shownow">
        <h4>Show It</h4>
      </div>
    </div>
    <div class="notshow">
      <ul class="catlist">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
    </div>
  </div>

</div>

Answer 2

试试下面的代码。它将从所有notshow 中删除该类，并显示最接近单击元素的notshow

Updated fiddle here.

$('.shownow').click(function() {
   $(".notshow").removeClass("show")
   $(this).parent().next(".notshow").addClass("show");
})

Answer 3

使用 JQuery 的简单显示/隐藏。试试下面的代码，当你点击'Show It'时，它会在当前父容器中找到'.notshow'并相应地隐藏其他容器：

$('.shownow').click(function() {
  $(this).parents(".main:first").find(".notshow").toggle();
});

.notshow {
  display: none;
}

.catlist {
  list-style: none;
}

.shownow h4 {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">

  <div class="main">
    <div class="title">
      <div class="shownow">
        <h4>Show It</h4>
      </div>
    </div>
    <div class="notshow">
      <ul class="catlist">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
    </div>
  </div>

  <div class="main">
    <div class="title">
      <div class="shownow">
        <h4>Show It</h4>
      </div>
    </div>
    <div class="notshow">
      <ul class="catlist">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
    </div>
  </div>


  <div class="main">
    <div class="title">
      <div class="shownow">
        <h4>Show It</h4>
      </div>
    </div>
    <div class="notshow">
      <ul class="catlist">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      </ul>
    </div>
  </div>

</div>

Answer 4

终于有somethig可以为你服务了

<div class="data">

<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>

<div class="main">
<div class="title">
<p class="shownow"><h4>Show It</h4><p>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>


<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>

</div>
<p>Hello</p>
<p class="selected">Hello Again</p>
<div><span>And Again</span></div>
<script>
var elms = $( "div.notshow" )
$(document).on("click", ".title", function(event){
    event.preventDefault();
    $('.notshow').removeClass('show');

    $(this).closest('div').next('.notshow').addClass('show');
}); 

</script>

Answer 5

let x = document.querySelectorAll('.main');
let list = document.querySelectorAll('.notshow')

let length = x.length;


for (let i = 0; i < length; i++) {
    x[i].onclick = () => {

        if (list[i].classList.contains('show')) {
            list[i].classList.toggle('show');
        } else {
            for (let x = 0; x < length; x++) {
                list[x].classList.remove('show');
            }
            list[i].classList.toggle('show');  // toggle/add
        }
    }
}



//let x = document.querySelectorAll('.main');
//let list = document.querySelectorAll('.notshow')

//let length = x.length;

//for (let i = 0; i < length; i++) {
//    x[i].onclick = () => {
//        list[i].classList.toggle('show');  // toggle/add
//    }
//}

.notshow{
   display:none;  
}
.catlist{
   list-style:none; 
}
 .show{
  display:block;
}

<div class="data">

        <div class="main">
            <div class="title">
                <div class="shownow">
                    <h4>Show It</h4>
                </div>
            </div>
            <div class="notshow">
                <ul class="catlist">
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                </ul>
            </div>
        </div>

        <div class="main">
            <div class="title">
                <div class="shownow">
                    <h4>Show It</h4>
                </div>
            </div>
            <div class="notshow">
                <ul class="catlist">
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                </ul>
            </div>
        </div>


        <div class="main">
            <div class="title">
                <div class="shownow">
                    <h4>Show It</h4>
                </div>
            </div>
            <div class="notshow">
                <ul class="catlist">
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                </ul>
            </div>
        </div>

    </div>

Answer 6

我已经更新了我的答案，这将对您有所帮助，只需将其添加到您的代码中即可。

<style type="text/css">
.notshow{
    display: none;
}
</style>

<script type="text/javascript">

$(document).on('click','.shownow', function(){
    var this_display = $ 
(this).parent().next('.notshow').css('display');
    $('.notshow').css('display','none');
    if(this_display=="block"){
        $(this).parent().next('.notshow').css('display','none');
    }else{
        $(this).parent().next('.notshow').css('display','block');
    }
});
</script>