javascript - jQuery 用选定的一个分隔 div

Question

我有多个具有相同 div id 的 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>

我真正想要的是，当有人点击具有文本“content 1”的父 div 时，其具有 id“show”的子 div 将出现并关闭，而不是所有具有 id“show”的 div

Answer 1

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

• 需要在点击的div中找到id显示的div
• 然后隐藏其他id为show的div，并使用not()过滤掉自己id为show的子元素
• 在#show 中使用 class 而不是 id，更正它

$('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>