jquery toggleclass在單獨divs

我使用引導程序的js在Wordpress圖庫頁面上執行div摺疊，但無法使切換功能正常工作。當你點擊另一個項目時，第一個項目不會摺疊。它保持開放。你可以看到它鏈接到開發網站：Dev site link jquery toggleclass在單獨divs

我沒有使用手風琴引導程序設置，因爲我希望每個collapsing div佔用觸發鏈接行下的相同空間。

我從bootstrap的角度問了這個問題，但沒有得到答案。所以我想知道是否有使用Jquery toggleclass的方法？

引導程序將'in'類應用於擴展項目。所以我想我需要切換類刪除？我發現並試圖修改一些Jquery，但沒有運氣。

代碼的簡化版本是：

<div id="desktop-view"> 

    <div id="gallery-squares-1" class="gallery-squares clearfix"> 
     <a href="#collapseExample-1" class="ie-bgsize gallery-img" data-toggle="collapse" data-parent="#desktop-view"> 
      <div class="img-mouse-over"></div> 
     </a><!-- .post-gallery-img --> 
     <a href="#collapseExample-2" class="ie-bgsize gallery-img" data-toggle="collapse" data-parent="#desktop-view"> 
      <div class="img-mouse-over"></div> 
     </a><!-- .post-gallery-img --> 
     <a href="#collapseExample-3" class="ie-bgsize gallery-img" data-toggle="collapse" data-parent="#desktop-view"> 
      <div class="img-mouse-over"></div> 
     </a><!-- .post-gallery-img --> 
    </div> <!-- .gallery-squares --> 

    <div id="gallery-expanders-1" class="gallery-expanders clearfix"> 
     <div class="collapse" id="collapseExample-1"> 
      <div class="gallery-content"> 
       <div class="ie-bgsize gallery-content-img"></div> 
       <h6>Title</h6> 
       <p>Description</p> 
      </div> <!-- .gallery-content --> 
     </div> <!-- .collapse --> 
     <div class="collapse" id="collapseExample-2"> 
      <div class="gallery-content"> 
       <div class="ie-bgsize gallery-content-img"></div> 
       <h6>Title</h6> 
       <p>Description</p> 
      </div> <!-- .gallery-content --> 
     </div> <!-- .collapse --> 
     <div class="collapse" id="collapseExample-3"> 
      <div class="gallery-content"> 
       <div class="ie-bgsize gallery-content-img"></div> 
       <h6>Title</h6> 
       <p>Description</p> 
      </div> <!-- .gallery-content --> 
     </div> <!-- .collapse --> 
    </div> <!-- .gallery-expanders --> 

</div>

CSS：

a.gallery-img { 
    width: 15%; 
    padding-bottom: 15%; 
    margin: 0 1.6666666% 1.6666666% 0; 
    display: block; 
    float: left; 
    position: relative; 
    background-color: #fff; 
} 

.gallery-content { 
    background-color: black; 
    margin-bottom: 1.6666666%; 
    color: #fff; 
    padding: 1.6666666%; 
} 

.gallery-content-img { 
    width: 98.5%; 
    padding-bottom: 50%; 
    margin-bottom: 1.8%; 
} 

.gallery-content h6 { 
    color: #fff; 
    font-size: 18px; 
    line-height: 1.2em; 
    margin: 0; 
    width: 98.5%; 
} 

.gallery-content p { 
    font-size: 14px; 
    line-height: 1.2em; 
    margin: 1% 0; 
    width: 98.5%; 
} 

.gallery-content p:last-child { 
    margin-bottom: 0; 
} 

.img-mouse-over { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    position: absolute; 
    background: none; 
} 

.img-mouse-over:hover, 
.img-mouse-over:active { 
    background: rgba(0, 0, 0, 0.5) no-repeat center center; 
}

JQuery的我想：

$('.gallery-squares a').click(function(e){ 
    e.preventDefault(); 
    $('.collapse').removeClass('in'); 
});

我只是無法得到它的清除活性上'in'的課。我想我還需要確保它只從當前活動div中刪除'in'，而不是點擊將創建的那個'in'。

在此先感謝您的任何建議。

來源

2015-02-26 Paul Burnhill

您必須刪除in類並添加collapse類。

$(document).on('show.bs.collapse', function() { 
    $('.in').addClass('collapse').removeClass('in'); 
})

來源

2015-02-26 20:06:16 tanwaniniranjan

這個工作很好，甚至對我來說是合理的，一個JS luddite！謝謝！ –

好了，所以如果我們永遠不希望in類有...

$(document).on('shown.bs.collapse', function() { 
    $('.in').removeClass('in'); 
})

上的「show事件

或可能：

$(document).on('show.bs.collapse', function() { 
    $('.in').removeClass('in'); 
})

（我不知道，因爲我這一個不知道什麼時候它添加類in）

請參閱該文檔爲collapse events here

來源

2015-02-26 18:59:58 Ted

jquery toggleclass在單獨divs

回答

相關問題