bootstrap visible - * - ブロックとjquery toggle（）conflict - divを表示/非表示しようとしています

Question

私のウェブサイトでブートストラップとjqueryを使用しています。私は、ウィンドウのサイズに応じて2つの異なる見解を持っているので、私はCOL-MD-、COL-SM-および可視 - - ブロックの使用を作ってるんだ、私はに走ってきたなど

をhidden-問題は、「もっと見る」ボタンが押されてからもう一度クリックするともう一度消えるまで、いくつかのdivを「display：none」として開始したいという問題です。これは正常にjQueryのslideToggle（）関数を使用して正常に動作します。しかし、私は "visible-xs-block"と "visible-md-block"を使用しているので、私は問題にぶつかっています。

.visible-XS-ブロックとしての地位を定義しています

@media (max-width: 991px) and (min-width: 768px) 
    .visible-sm-block { 
     display: block!important; 
} 

私の隠されたdiv要素が次のように定義されたクラス "hideDiv" があります。だから、

.hideDivs { 
    display: none; 
} 

を、彼らが隠されて起動し、 「もっと見る」ボタンが押されると、そのクラスはトグルされます。これは、slideToggle（）でそれらを再表示しようとするまでうまくいきます。ページがスライドしてdivが完全に消えてしまいますが、.visible-xs-blockが表示されるので再表示されます。

これらの新しいvisible - * - ブロッククラスなどを追加して別のものを表示するまで、このコードは正常に機能していました。

自分のクラスに重要なのを追加しようとしましたが、これは常に.visible-xs-blockをオーバーライドしてdivが表示されません。

Here is a fiddle showing it conflicting and working incorrectly - ウィンドウの「ブラウザ」セクションを大きくして小さくし、「もっと見る」ボタンを使用して問題を確認してください。

私はちょうど私が自分自身を混乱させた点を知っていますが、良い解決策が何であるか分かりません。どんな助けでも大歓迎です。

ありがとうございました！

Answer 1

.visible - * - block {display：block！important}は何があってもその下に要素を表示しています。 display：none！importantでこれをオーバーライドする必要があります。これを行うにはたくさんの方法があります。私はあなたのコードに簡単で怠惰な1つの基盤を与えます。 addclass/removeclassを使用して表示をトリガーする：none！important。

CSS

.hidden { 
    display: none !important; 
} 

JS

$('.see-more-button').click(function() { 
event.preventDefault(); 
if($('.hideDiv').is(":visible")) { 
    $('.hideDiv').addClass("hidden"); 
    $('.see-more-button').text("+ See more"); 
} 
else { 
    $('.hideDiv').removeClass("hidden").show(); 
    $('.see-more-button').text("- See less"); 
} 
});