0
私は現在、ブートストラップを使ってウェブサイトを構築しています。ナビゲーションバーに「サービス」リンクが表示されています。サービスの一覧が表示されます。ユーザーは「サービス」自体をクリックすることもでき、それらはリンクに導かれます。ユーザーが画面のサイズを変更したり、携帯端末でウェブサイトを見ている場合は、「サービス」からリンクを削除する必要があります。ウィンドウサイズに基づいて、ブートストラップナビゲーションバーのリンクが消える/再表示されるようにするにはどうすればよいですか？
下のコードは作品の種類です。私は、デスクトップブラウザを複数回サイズ変更しようとするとバグに遭遇しています。画面を小さくすると、ブラウザウィンドウが大きく表示されなくなり、「サービス」のリンクが表示されなくなります。私は何が欠けていますか？
HTML
<li class="dropdown">
<a href="#services" class="dropdown-toggle linkedDropDown" data-toggle="dropdown">Services
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="">Link 1</a>
</li>
<li>
<a href="">Link 2</a>
</li>
<li>
<a href="">Link 3</a>
</li>
<li>
<a href="">Link 4</a>
</li>
</ul>
</li>
CSS
@media (min-width:990px){
.dropdown:hover .dropdown-menu {
display: block !important;
margin-top: 0 !important;
}
}
jQueryの
$(document).ready(function() {
changeElements();
$(window).resize(function() {
changeElements();
});
});
function changeElements(){
if ($(window).width() < 990) {
$('.linkedDropDown').removeAttr('href');
}
else{
$('.linkedDropDown').attr('href');
}
}