单击时折叠其他Div

时间：2017-07-18 09:01:29

标签： javascript jquery html css

默认情况下隐藏类.notshow，我希望在单击.shownow类中的Show It文本后可以看到带有.notshow类的div。 我创建了一个jquery代码，但它不起作用。 当我点击.shownow div时，所有隐藏的div与.notshow类都可见。 我只想要一个带有.notshow类的div可见。

示例：我想显示单个div，类.notshow是可见的，如果我单击另一个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>

6 个答案:

答案 0 :(得分：1)

为此，我们必须定位您想要的show，我们可以通过组合来定位它。

  1. $(this) - 您点击的元素。
  2. .closest - 元素的父级。
  3. 如果您希望某些动画使用.slideDown .show() .slideUp .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>
    id

答案 1 :(得分：0)

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

Updated fiddle here. 

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

答案 2 :(得分：0)

使用JQuery进行简单的显示/隐藏。尝试以下代码，当您点击“显示它”时，它会找到＆＃39; .notshow＆＃39;在当前父容器中并相应地隐藏其他容器：

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

.catlist {
  list-style: none;
}

.shownow h4 {
  cursor: pointer;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

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

<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>

答案 4 :(得分：0)

help = q_set[:]
q_set = q_set[:code_id - 1]
q_set.append(help[code_id:])

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;
}

答案 5 :(得分：0)

最后得到了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>
相关问题
最新问题