부트 스트랩 visible - * - 블록 및 jquery 토글() 충돌 - div 표시/숨기기 시도 중

Question

내 웹 사이트에서 부트 스트랩 및 jquery를 사용하고 있습니다. 나는 창 크기에 따라 2 개 개의 다른 견해를 가지고, 그래서 COL-MD-, COL-SM- 및 visible- - 블록의 사용을 만들고있어, 나는 우연히 한 등

을 hidden- 문제는 "더보기"버튼을 누를 때까지 일부 div가 "display : none"으로 시작하도록하고 다시 클릭 할 때 다시 사라지도록하려는 경우입니다. jQuery slideToggle() 함수를 사용하면 정상적으로 작동합니다. 그러나 이제는 "visible-xs-block"및 "visible-md-block"을 사용하고 있으므로 문제가 발생합니다.

이

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

내 숨겨진 된 div가 가지고있는 정의 된 클래스 "hideDiv"는 다음과 같습니다 :

.visible-XS-블록 자체를 정의

.hideDivs { 
    display: none; 
} 

을 그래서, 그들은 숨겨진 밖으로 시작 "더보기"버튼을 누르면 클래스가 해제됩니다. 이것은 slideToggle()로 다시 숨기려 할 때까지는 괜찮습니다. 페이지가 위로 올라오고 div가 완전히 사라집니다. (그런 것 같습니까?) 1 프레임이지만 .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로 이것을 오버라이드 할 필요가있다. 이 작업을 수행 할 수있는 방법이 많이 있습니다. 코드 하하에서 쉽고 게으른 하나의 기반을 제공 할 것입니다! 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"); 
} 
});