父元素的兄弟元素（單擊元素除外）在jQuery中消失

Question

我試圖在單擊其中的一個按鈕時全屏顯示div＃controls ，並使具有相同父代div＃buttons的所有其他div＃controls消失。

我的HTML：

           <div id="testpile" class="inner cover">
                <div id="buttons" class="buttons">
                    <div id="controls" class="col-md-4 rat">
                        <h1>Rationelt</h1>
                        <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
                        <a id="1" class="btn btn-group btn-default" role="button">Rationelt</a>
                    </div>
                    <div id="controls" class="col-md-4 emo">
                        <h1>Emotionelt</h1>
                        <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
                        <a id="2" class="btn btn-group btn-default" role="button">Emotionelt</a>
                    </div>
                    <div id="controls" class="col-md-4 per">
                        <h1>Personligt</h1>
                        <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
                        <a id="3" class="btn btn-group btn-default" role="button">Personligt</a>
                    </div>
                </div>
            </div>

我的jQuery：

<script type="text/javascript">
    $('.btn-group').on('click', function() {
        $(this).parent().toggleClass('col-md-4 col-md-12');
        $(this).parent().siblings().toggleClass('col-md-4 col-md-0');
    });
</script>

我很確定我遇到的問題是我沒有成功定位正確的div，但是我自己嘗試了所有方法來解決它，可悲的是，我沒有能力解決。

Answer 1

除了要復制控件ID之外，只需切換父母同級的顯示以在每次單擊按鈕時顯示/隱藏它們：

 $('.btn-group').on('click', function() {
   $(this).parent().siblings().toggle();
 });

Answer 2

盡管ID無效，但您的定位目標是正確的div。 問題是使用toggleClass是一個問題，尤其是在第一次單擊后，因為它將從當前狀態切換每個類，這將導致不一致的結果，具體取決於用戶在每個項目上單擊的順序–您似乎也在切換網格列聲明，我不確定您打算做什么？

下面，我將您的代碼更改為顯式使用addClass和removeClass （並使“隱藏”仍然略顯可見，以便您可以查看后續點擊的效果）

 $('.btn-group').on('click', function() { $(this).parent().removeClass('hidden'); $(this).parent().siblings().addClass('hidden'); }); 

 .hidden {opacity:0.1} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="testpile" class="inner cover"> <div id="buttons" class="buttons"> <div id="controls" class="col-md-4 rat"> <h1>Rationelt</h1> <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p> <a id="1" class="btn btn-group btn-default" role="button">Rationelt</a> </div> <div id="controls" class="col-md-4 emo"> <h1>Emotionelt</h1> <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p> <a id="2" class="btn btn-group btn-default" role="button">Emotionelt</a> </div> <div id="controls" class="col-md-4 per"> <h1>Personligt</h1> <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p> <a id="3" class="btn btn-group btn-default" role="button">Personligt</a> </div> </div> </div> 

Answer 3

除了給他們一個列類，我不認為您對父輩的兄弟姐妹做任何事情。 據我了解，您需要添加的是.hide()方法。 這將隱藏您要隱藏的div。

這是來自jQuery API的鏈接，它將幫助您並提供示例鏈接

Answer 4

刪除該id controls 。 ID不應該重復，使用類就好；

<div class="controls col-md-4 rat">

並使用JS like;

$('.btn-group').on('click', function() {
    $(".controls").hide();
    $(this).parents(".controls").show();
});