Question

我有多个具有相同div div的div但是我想在任何主div被激活时将每个div分开它将显示其子div，我尝试了很多功能但是没有任何对我有效。这是我的代码

css

.active{
    border-style:solid;
    border-width:1px;
    border-color:black;
}

JS

    $('div[id^="show"]').hide();
    $("div").click(function(){
    $('div').removeClass('active');
    $(this).addClass('active');
        setTimeout(function(){
                $('div[id^="show"]').show();
            setTimeout(function() {
        $('div[id^="show"]').hide()
    }, 5000);
        }, 3000);
    });
});

HTML

<div class="div">
content 1
<div id="show">ad here1</div>
</div>
<div class="div">
content 2
<div id="show">ad here2</div>
</div>
<div class="div">
content 3
<div id="show">ad here3</div>
</div>
<div class="div">
content 4
<div id="show">ad here4</div>
</div>

我真正想要的是，当有人点击有文字＆＃34;内容1＆＃34;它的孩子div有id＆＃34;显示＆＃34;将出现并关闭而不是所有带有id＆＃34;显示＆＃34;

的div

Answer 1

看到输出希望它会有所帮助，我已经省略了超时，你可以再次插入它们

您需要在点击的div
然后将id为show的其他div隐藏起来，并使用not（）
使用class而不是id为#show，更正

$('div#show').hide();
$("div").click(function() {
  $('div').removeClass('active');
  $(this).addClass('active');
  
    $neardiv = $(this).find('div#show');
    $neardiv.show();
   
      $('div#show').not($neardiv).hide()
    

});

.active {
  border-style: solid;
  border-width: 1px;
  border-color: black;
  color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="div">
  content 1
  <div id="show">ad here1</div>
</div>
<div class="div">
  content 2
  <div id="show">ad here2</div>
</div>
<div class="div">
  content 3
  <div id="show">ad here3</div>
</div>
<div class="div">
  content 4
  <div id="show">ad here4</div>
</div>

jQuery用选定的div分隔div

1 个答案: