Question

我有一个问题。我有一个水平菜单，当我重新调整窗口大小时，我希望我的菜单更改为引导程序。我在script.js编写代码，我不确定它是否正确。如果你能帮助我，我会很感激。

＆＃13;

if( $(window).width() < 1000)
{
	  $( "div" ).removeclass(".nav").addclass(".dropdown") ;
		  $( ".dropdown" ).append("<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu
    <span class="caret"></span></button>");
		$( "ul" ).removeclass(".hmenu").addclass(".dropdown-menu") ;
		}

＆＃13;

Answer 1

这是错误的做法。您需要通过css媒体查询来处理此问题。 Bootstrap已经定义了与之相关的类。

Answer 2

要完成此操作，您应该使用css media query

**尝试在整页**

中运行以下代码段时调整浏览器大小

/*when screen is bigger than 600px*/
@media screen and (max-width: 600px){
  .dropdown {
    background-color: gray;
  }
}
/*when screen is smaller than 600px*/
@media screen and (min-width: 600px){
  .dropdown {
    background-color: green;
  }
}

<div class="dropdown">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
  </ul>
</div>

调整页面大小时，jquery-booststrap菜单不会改变

2 个答案: