jQuery-单击并打开

我正在使用jQuery和bootstrap

我想要的是，当我在一列中单击一个

h5

时，另一个div在另一列中打开，当再次单击h5时，它关闭（我还没有尝试该代码） 我有好几排

我的html如下所示：

<div class="row">
    <div class="col-md-6">
        <h5 class="select">2013 - </h5>
    </div>

    <div class="col-md-6">
        <div id="dropdown" class="dropdown">
            <p>Content</p>
        </div>
    </div>
</div>

$(document).ready(function(){
var dropdown = $('.dropdown');
dropdown.hide();

$('.select').on('click', function(){
    $(this)
    .next('.dropdown')
    .slideDown(400)
    console.log('.dropdown');

})

}))

我想问题是我正在使用

next（）

。 是否有其他更正确的方法或不同的方法？

尝试（更新）

html

---

jsfiddle

我使用style=“display:none；”属性解决了这个问题，如下面的代码所示

JavaScript:

<script type="text/javascript">
function _Toggle(div){

    if(document.getElementById(div).style.display == 'none'){
        document.getElementById(div).style.display = 'block';
    }else{
        document.getElementById(div).style.display = 'none'; 
    }
}
</script>

功能切换（div）{
if（document.getElementById（div.style.display=='none'）{
document.getElementById（div.style.display='block'；
}否则{
document.getElementById（div.style.display='none'；
}
}

Html:

 单击标题将隐藏的正文文本
'

我认为最简单的解决方案是使用引导默认功能

<div class="row">
    <div class="col-md-6">

             <h5 class="dropdown-toggle" data-toggle="dropdown">Menu</h5>

            <ul class="dropdown-menu">
                <li><a href="#">Choice1</a>
                </li>
                <li><a href="#">Choice2</a>
                </li>
                <li><a href="#">Choice3</a>
                </li>
                <li class="divider"></li>
                <li><a href="#">Choice..</a>
                </li>
            </ul>

    </div>
</div>

菜单

。next

表示紧跟在兄弟姐妹之后。因此，第二个将起作用。

。next（）

不会影响布局。你可以创建一个你想要的布局的JSFIDLE。为了让我的理解更清楚，当你点击。选择类，下拉类应该显示..我是对的吗？好的，不。但是脚本只在我放在同一个div（column-md-6）中时起作用是的。确切地说，当我点击.select时，.dropdown应该显示.next意味着紧跟在兄弟姐妹之后，即每个

的下一个兄弟姐妹。select

。只保留那些带有class

下拉列表的

。越来越近。它会打开所有隐藏的分区。它应该是唯一一个单击不确定“它会打开所有隐藏分区”的分区？在最初的帖子中，只有

html

中描述的1个“隐藏div”。如果可能，可以发布

html

的完整结构吗？见更新后的帖子。谢谢你。。我对这个问题的描述不够充分。下一次的教训。我在另一篇帖子中找到了我的答案（见答案）。谢谢

$(function() {
  $(".col-md-6 #dropdown").hide();
    $(document).on("click", ".col-md-6", function(e) {   
      $(e.target).siblings("#dropdown").toggle();
    });
});

<script type="text/javascript">
function _Toggle(div){

    if(document.getElementById(div).style.display == 'none'){
        document.getElementById(div).style.display = 'block';
    }else{
        document.getElementById(div).style.display = 'none'; 
    }
}
</script>

<div class="foo_summary_header_1">
    <a href="#a147358" onclick="_Toggle('traits_12345');">Heading</a>
</div>


<div id="traits_12345" class="foo_traits" style="display:none;">
    <P>Body text that will be hidden by clicking the heading</P>
</div>'

<div class="row">
    <div class="col-md-6">

             <h5 class="dropdown-toggle" data-toggle="dropdown">Menu</h5>

            <ul class="dropdown-menu">
                <li><a href="#">Choice1</a>
                </li>
                <li><a href="#">Choice2</a>
                </li>
                <li><a href="#">Choice3</a>
                </li>
                <li class="divider"></li>
                <li><a href="#">Choice..</a>
                </li>
            </ul>

    </div>
</div>