This question already has answers here:
Onclick Show / Hide Multiple Divs Jquery
                                
                                    (5个答案)
                                
                        
                                5年前关闭。
            
                    
我正在使用jQuery和Bootstrap。

我想要的是,当我单击一列内的h5时,另一格在另一列中打开,并且再次单击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>


但是,当我将它们合并到一起时,我似乎无法做到这一点。像这样:

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

        <div id="dropdown" class="dropdown">
            <p>Content1</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()
还有另一种更正确的方法还是另一种方法?

最佳答案

我已经使用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>


HTML:

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

10-05 21:04
查看更多