Sorry for my english..
对不起我的英语不好..
I understand that it was done with addClass and removeClass but how to write terms do not understand I need to do so if the screen resolution is less than 768 pixels then add the attributes id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
and the class "dropdown-menu"
to the ul
with class small
and remove class from li
parent
class and remove the ul with class nav-child
我知道它是用addClass和removeClass完成的,但是如果屏幕分辨率小于768像素,那么如何编写术语不明白我需要这样做然后添加属性id =“dLabel”type =“button”data-toggle = “dropdown”aria-haspopup =“true”aria-expanded =“false”和类“dropdown-menu”到ul的类小并从li父类中删除类并删除带有nav-child类的ul
UPD
I have this:
我有这个:
<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>
i want do this, when window screen less than 768px:
我希望这样做,当窗口屏幕小于768px时:
<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>
I want to remove the classes nav-child and parent and add to span attributes
我想删除nav-child和parent类,并添加到span属性
can someone come in handy:
有人会派上用场:
$(function () {
var window_width = 750; // or $(window).width();
if ($(window).width() < 768) {
$('.small').addClass('dropdown-menu');
$('.deeper').removeClass('parent');
$('.small').removeClass('nav-child');
$('.deeper .nav-header').attr({id: 'dLabel', type: 'button', 'data-toggle':'dropdown', 'aria-haspopup':'true', 'aria-expanded': 'false'});
} else {
$('.small').removeClass('dropdown-menu');
$('.deeper').addClass('parent');
$('.small').addClass('nav-child');
$('.deeper .nav-header').attr({id: '', type: '', 'data-toggle':'', 'aria-haspopup':'', 'aria-expanded': ''});
}
});
4 个解决方案
#1
3
For adding attributes and classes you could use:
要添加属性和类,您可以使用:
$('ul.small').attr({id: 'dLabel', type: 'button', data-toggle:'dropdown', aria-haspopup:'true', aria-expanded: 'false'});
$('ul.small').addClass('dropdown-menu');
Removing is simpler, because then you set the attribute to an empty string:
删除更简单,因为您将属性设置为空字符串:
$('ul.small').attr({id: '', type: '', data-toggle:'', aria-haspopup:'', aria-expanded: ''});
Current size of your windows can be get with:
您当前的窗户大小可以通过以下方式获得:
$( window ).width()
Or do you want this attributes to be given on resize events? Then just try:
或者您希望在调整大小事件时给出此属性吗?然后尝试:
$( 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: ''});
}
}
After author has edited his question:
在作者编辑了他的问题之后:
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>
#2
2
You are using addClass and removeClass, means you have jQuery included. Use this:
您正在使用addClass和removeClass,这意味着您包含了jQuery。用这个:
if($(window ).width() < 768){ // Returns width of browser viewport
// addClass
}
#3
1
Try this :
尝试这个 :
$(document).ready(function(){
if ($(window).width() < 768) {
$("ul").attr({id:"dLabel",type:"button",data-toggle:"dropdown",aria-haspopup:"true",aria-expanded="false"});
$("ul").addClass("dropdown-menu");
//and rest code..........
}
else {
// go back Default...
}
})
#4
0
alternative: draw both types and hide one or other using CSS.
替代方法:使用CSS绘制两种类型并隐藏一种或另一种。
@media screen and (min-width: 0px) and (max-width: 768px) {
#first { display: block; }
#second { display: none; }
}
@media screen and (min-width: 768px) {
#first { display: none; }
#second { display: block; }
}
much easier to design and debug in my opinion
在我看来,设计和调试更容易
#1
3
For adding attributes and classes you could use:
要添加属性和类,您可以使用:
$('ul.small').attr({id: 'dLabel', type: 'button', data-toggle:'dropdown', aria-haspopup:'true', aria-expanded: 'false'});
$('ul.small').addClass('dropdown-menu');
Removing is simpler, because then you set the attribute to an empty string:
删除更简单,因为您将属性设置为空字符串:
$('ul.small').attr({id: '', type: '', data-toggle:'', aria-haspopup:'', aria-expanded: ''});
Current size of your windows can be get with:
您当前的窗户大小可以通过以下方式获得:
$( window ).width()
Or do you want this attributes to be given on resize events? Then just try:
或者您希望在调整大小事件时给出此属性吗?然后尝试:
$( 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: ''});
}
}
After author has edited his question:
在作者编辑了他的问题之后:
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>
#2
2
You are using addClass and removeClass, means you have jQuery included. Use this:
您正在使用addClass和removeClass,这意味着您包含了jQuery。用这个:
if($(window ).width() < 768){ // Returns width of browser viewport
// addClass
}
#3
1
Try this :
尝试这个 :
$(document).ready(function(){
if ($(window).width() < 768) {
$("ul").attr({id:"dLabel",type:"button",data-toggle:"dropdown",aria-haspopup:"true",aria-expanded="false"});
$("ul").addClass("dropdown-menu");
//and rest code..........
}
else {
// go back Default...
}
})
#4
0
alternative: draw both types and hide one or other using CSS.
替代方法:使用CSS绘制两种类型并隐藏一种或另一种。
@media screen and (min-width: 0px) and (max-width: 768px) {
#first { display: block; }
#second { display: none; }
}
@media screen and (min-width: 768px) {
#first { display: none; }
#second { display: block; }
}
much easier to design and debug in my opinion
在我看来,设计和调试更容易