如何在单击父div时显示下一个div（jquery）

Question

如何在单击父div时显示下一个div（jquery）

3

我希望在我的页面上添加一些效果。点击主div时，我想要显示或隐藏内部div。但是这对我来说不起作用。

HTML

 <div class="cmn"><div><span></span></div>Here
        <div class="toShow" style="display: none;">
                <div class="toshowinnr clr">
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                </div>
            </div>
    </div>
<div class="cmn"><div><span></span></div>Here
        <div class="toShow" style="display: none;">
                <div class="toshowinnr clr">
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                </div>
            </div>
    </div>
<div class="cmn"><div><span></span></div>Here
        <div class="toShow" style="display: none;">
                <div class="toshowinnr clr">
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                    <a class="sclnk" href="#"></a>
                </div>
            </div>
    </div>

当点击cmn时，我想要显示/隐藏toShow div。我已经尝试过，但是没有成功。

jQuery('div.cmn').click(function(){
        jQuery(this).closest('div.toShow').stop().slideDown();
    }).mouseleave(function(){
        jQuery(this).closest('div.toShow').stop().slideUp();
    });

- Developer

5个回答

1

试试这个

<div class="cmn"><div><span></span></div>Here
<div class="toShow" style="display: none;">
        <div class="toshowinnr clr">
            <a class="sclnk" href="#">1</a>
            <a class="sclnk" href="#">2</a>
            <a class="sclnk" href="#">3</a>
            <a class="sclnk" href="#">4</a>
            <a class="sclnk" href="#">5</a>
        </div>
    </div>
</div>
<div class="cmn"><div><span></span></div>Here
<div class="toShow" style="display: none;">
        <div class="toshowinnr clr">
            <a class="sclnk" href="#">6</a>
            <a class="sclnk" href="#">7</a>
            <a class="sclnk" href="#">8</a>
            <a class="sclnk" href="#">9</a>
            <a class="sclnk" href="#">10</a>
        </div>
    </div>

jQuery

这将始终获取第一个 div.toShow

jQuery('div.cmn').click(function() {
  jQuery(this).children('div.toShow').first().stop().slideDown();
}).mouseleave(function() {
  jQuery(this).children('div.toShow').first().stop().slideUp();
});

Fiddle: 演示

- Sid M

0

你可以尝试这样做。

$(document).ready(function() {
  $(".here_button").click(function() {
     
     $($(this).parents(".cmn").find(".toShow")[0]).css("display","block");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="cmn">
  <div><span></span>
  </div><span class="here_button">Here</span>
  <div class="toShow" style="display: none;">
    <div class="toshowinnr clr">
      <a class="sclnk" href="#">Some Text</a>
      <a class="sclnk" href="#">Some Text</a>
      <a class="sclnk" href="#">Some Text</a>
      <a class="sclnk" href="#">Some Text</a>
      <a class="sclnk" href="#">Some Text</a>
    </div>
  </div>
</div>
<div class="cmn">
  <div><span></span>
  </div><span class="here_button">Here</span>
  <div class="toShow" style="display: none;">
    <div class="toshowinnr clr">
      <a class="sclnk" href="#">Some Text</a>
      <a class="sclnk" href="#">Some Text</a>
      <a class="sclnk" href="#">Some Text</a>
      <a class="sclnk" href="#">Some Text</a>
      <a class="sclnk" href="#">Some Text</a>
    </div>
  </div>
</div>
<div class="cmn">
  <div><span></span>
  </div><span class="here_button">Here</span>
  <div class="toShow" style="display: none;">
    <div class="toshowinnr clr">
      <a class="sclnk" href="#">Some Text</a>
      <a class="sclnk" href="#">Some Text</a>
      <a class="sclnk" href="#">Some Text</a>
      <a class="sclnk" href="#">Some Text</a>
      <a class="sclnk" href="#">Some Text</a>
    </div>
  </div>
</div>

- Shehroz Ahmed

0

我认为这段代码适合你使用。

  jQuery('div.cmn').click(function(event,ui){
        jQuery(ui).find('div.toShow').stop().slideDown();
    }).mouseleave(function(event,ui){
        jQuery(this).find('div.toShow').stop().slideUp();
    });

- Ankit Kathiriya

我有多个toShow div和cmn div，我想显示最接近我点击的cmn div的div。 - Developer

0

你需要将内部div的display属性设置为block。看一下这个：

$(".cmn").on("click",function(){
  $(this).find(".toShow").toggleClass("hideshow");
});

CSS 代码

.hideshow
{
  display:block;
}

.toggleClass 会检查 div.toShow 上是否存在 "hideshow" 类，如果不存在，则添加 "hideshow" 类，否则将删除 ".hideshow" 类，这将在单击父 div 时执行隐藏/显示操作。

- Akshay Chawla

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arun P Johny · Accepted Answer

由于你要寻找一个子元素，所以需要使用.find()方法。

jQuery('div.cmn').click(function() {
  jQuery(this).find('div.toShow').stop().slideDown();
}).mouseleave(function() {
  jQuery(this).find('div.toShow').stop().slideUp();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cmn"><div><span></span></div>Here
  <div class="toShow" style="display: none;">
    <div class="toshowinnr clr">
      <a class="sclnk" href="#">1</a>
      <a class="sclnk" href="#">2</a>
      <a class="sclnk" href="#">3</a>
      <a class="sclnk" href="#">4</a>
      <a class="sclnk" href="#">5</a>
    </div>
  </div>
</div>
<div class="cmn"><div><span></span></div>Here
  <div class="toShow" style="display: none;">
    <div class="toshowinnr clr">
      <a class="sclnk" href="#">1</a>
      <a class="sclnk" href="#">2</a>
      <a class="sclnk" href="#">3</a>
      <a class="sclnk" href="#">4</a>
      <a class="sclnk" href="#">5</a>
    </div>
  </div>
</div>
<div class="cmn"><div><span></span></div>Here
  <div class="toShow" style="display: none;">
    <div class="toshowinnr clr">
      <a class="sclnk" href="#">1</a>
      <a class="sclnk" href="#">2</a>
      <a class="sclnk" href="#">3</a>
      <a class="sclnk" href="#">4</a>
      <a class="sclnk" href="#">5</a>
    </div>
  </div>
</div>