Question

对不起我的英文..

我知道它是用addClass和removeClass完成的，但是如何编写术语却不明白如果屏幕分辨率小于768像素，我需要这样做，然后将属性id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"和类"dropdown-menu"添加到ul类small，并从{中删除类{1}} li类并删除类parent

的ul

UPD

我有这个：

nav-child

我希望这样做，当窗口屏幕小于768px时：

<li class="item-104 deeper parent">
  <span class="nav-header ">About</span>
  <ul class="nav-child unstyled small">
   <li class="item-113"><a href="/o-ministerstve/novosti">News</a></li>
  </ul>
</li>

我想删除nav-child和parent类，并添加到span属性

有人会派上用场：

<li class="item-104 deeper">
      <span class="nav-header " id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About</span>
      <ul class="dropdown-menu unstyled small">
       <li class="item-113"><a href="/o-ministerstve/novosti">News</a></li>
      </ul>
    </li>

Answer 1

要添加属性和类，您可以使用：

$('ul.small').attr({id: 'dLabel', type: 'button', data-toggle:'dropdown', aria-haspopup:'true', aria-expanded: 'false'});
$('ul.small').addClass('dropdown-menu');

删除更简单，因为您将属性设置为空字符串：

$('ul.small').attr({id: '', type: '', data-toggle:'', aria-haspopup:'', aria-expanded: ''});

您的窗口的当前大小可以使用：

$( window ).width()

或者您是否希望在调整大小事件时提供此属性？然后试试：

$( window ).resize(function() {
  if ($( window ).width() < 768){
    $('ul.small').addClass('firstClass').addClass('secondClass');
    $('ul.small').attr({id: 'dLabel', type: 'button', data-toggle:'dropdown', aria-haspopup:'true', aria-expanded: 'false'});
  } else {
   $('ul.small').removeClass('firstClass').removeClass('secondClass');
    $('ul.small').attr({id: '', type: '', data-toggle:'', aria-haspopup:'', aria-expanded: ''});
  }
}

在作者编辑了他的问题之后：

var window_width = 750; // or $(window).width();

if ($(window).width() < 768) {
  $('#deeper').removeClass('parent');
  $('#deeper .nav-header').attr({id: 'dLabel', type: 'button', 'data-toggle':'dropdown', 'aria-haspopup':'true', 'aria-expanded': 'false'});
} else {
  $('#deeper').addClass('parent');
  $('#deeper .nav-header').attr({id: '', type: '', 'data-toggle':'', 'aria-haspopup':'', 'aria-expanded': ''});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="item-104 deeper parent">
  <span class="nav-header ">About</span>
  <ul class="nav-child unstyled small">
   <li class="item-113"><a href="/o-ministerstve/novosti">News</a></li>
  </ul>
</li>

Answer 2

您正在使用addClass和removeClass，意味着您包含了jQuery。使用此：

if($(window ).width() < 768){       // Returns width of browser viewport
     // addClass
 }

Answer 3

试试这个：

Deployment Target

Answer 4

替代方法：使用CSS绘制两种类型并隐藏其中一种或其他类型。

void main()
{
    cout << "Hello World";
    anotherMessage();
    cout << "Dont print this";
}

void anotherMessage()
{
    cout << "Print this";
}

在我看来更容易设计和调试

使用js添加类和属性

4 个答案: