兄弟姐妹點擊jQuery的

Question

消失

我試圖切換到全屏模式裏面一個按鈕被點擊時DIV＃控制，使所有其他DIV＃控制具有相同的父，DIV＃按鈕，消失。

我的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

我不認爲你正在做任何事情的父母的兄弟姐妹，除了給他們一個專欄類。從我所瞭解的你需要添加的方法是.hide()。 這將隱藏你想隱藏的div。

下面是從jQuery API的鏈接，這將幫助你並給予例子link

Answer 2

刪除ID controls。 ID不應該重複，在那裏使用類;

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

並使用JS like;

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

Answer 3

順便控件的ID被複制後，直接將父母兄弟姐妹的顯示顯示/隱藏在每個按鈕上點擊：

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

Answer 4

你的目標正確的DIV，儘管無效的重複ID。 使用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>