将下拉列表更改为 a，<div>反之亦然，jQuery 在调整大小时？

Question

当屏幕大小调整到小于700px时，我试图将其作为下拉菜单显示。我可以这样做，但当屏幕再次调整到大于701的大小时，我需要将其重新显示为正常，而不是下拉菜单。你知道我该怎么做吗？

以下是一个示例：在这个jfiddle中调整屏幕大小以查看下拉列表。我需要再次调整大小才能看到原始的

jfiddle：https://jsfiddle.net/rwj6oxc7/

HTML:

<div id="testing2" >
<div  id="1" > 1 </div>
<div  id="2" > 2 </div>
</div>

jQuery

$(document).ready(function () {
$(window).on("resize", function () {
var $theWindowSize = $(this).width();
if ($theWindowSize <= 700) {
var sel = $('<select id="tesing2"/>');
$("#testing2 div").each(function () {
sel.append(
"<option value=" + this.id + ">" + this.innerHTML + "</option>"
);
});
$("#testing2").replaceWith(sel);
}
else if ($theWindowSize >= 701) {
//??? show <div id=testing2/> as a normal <div>  ???
}
});
});

Answer 1

当您用选择框替换divs时，该元素不存在，因此您需要再次创建它们。因此，对于从中选择的循环选项，从选项中获取value和text，并将它们附加到div 中

演示代码 :

$(document).ready(function() {
$(window).on("resize", function() {
var $theWindowSize = $(this).width();
if ($theWindowSize <= 700) {
var sel = $('<select id="tesing2"/>');
$("#testing2 div").each(function() {
sel.append(
"<option value=" + this.id + ">" + this.innerHTML + "</option>"
);
});
$("#testing2").replaceWith(sel);
} else if ($theWindowSize >= 701) {
var div = $('<div id="testing2"/>');
//loop through each option
$("#tesing2 option").each(function() {
//append divs with value(id) and inner html
div.append(
"<div id=" + this.value + ">" + this.innerHTML + "</div>"
);
});
//replace it with select
$("#tesing2").replaceWith(div);
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="testing2">
<div id="1"> 1 </div>
<div id="2"> 2 </div>
</div>

或者，您不需要创建它们，只需根据屏幕宽度隐藏/显示所需的元素。

演示代码 :

$(document).ready(function() {
//create selcts
var sel = $('<select id="tesing2"/>');
$("#testing2 div").each(function() {
sel.append(
"<option value=" + this.id + ">" + this.innerHTML + "</option>"
);
});
$(".main_div").append(sel); //append in main div
$("#tesing2").hide() //hide it by default
$(window).on("resize", function() {
var $theWindowSize = $(this).width();
if ($theWindowSize <= 700) {
$("#tesing2").show() //show or hide same
$("#testing2").hide()
} else if ($theWindowSize >= 701) {
$("#tesing2").hide()
$("#testing2").show()
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_div">
<div id="testing2">
<div id="1"> 1 </div>
<div id="2"> 2 </div>
</div>
</div>

Answer 2

首先需要创建一个函数，并在ready+resize方法上调用它
我希望下面的片段能对你有所帮助。

[查看整页内容]

var is_set = false; 
var div = $('<div id="testing2"/>');
var sel = $('<select id="testing2"/>');
function ListToDropdown(){  
var $theWindowSize = $(window).width();
if ($theWindowSize <= 700) {
if (is_set == false){
$("#testing2 div").each(function(v,h) {  
sel.append(
"<option value="+this.id +">" + this.innerHTML + "</option>"
);
});
//div set to empty
div.html('');
// replace it with div
$("#testing2").replaceWith(sel);
}
is_set = true;
}
else if ($theWindowSize >= 701) { 
if (is_set == true){
$("#testing2 option").each(function() {
div.append(
"<div id="+this.value+">" + this.innerHTML + "</div>"
);
});
//select set to empty
sel.html('');
//replace it with select
$("#testing2").replaceWith(div);
}
is_set = false
}
}
$(document).ready(function() {
ListToDropdown();
$(window).on("resize", function() {
ListToDropdown();  
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="testing2">
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
</div>

Answer 3

构建代码：

<div id="div" >
<div  id="1" > 1 </div>
<div  id="2" > 2 </div>
</div>

然后：

$(document).ready(function () {
$(window).on("resize", function () {
var $theWindowSize = $(this).width();
if ($theWindowSize < 700) {
var sel = $('<select id="select"/>');
$("#div div").each(function () {
sel.append(
"<option value=" + this.id + ">" + this.innerHTML + "</option>"
);
});
$("#div").replaceWith(sel);
}else {
var div = $('<div id="div"/>');
$("#select option").each(function () {
div.append(
"<div id=" + this.value + ">" + this.innerHTML + "</div>"
);
});
$("#select").replaceWith(div);
}
});
});

Answer 4

您在HTML和jquery函数中犯了一些错误。请尝试一下，如果你不能理解，那么让我知道我会向你解释的。

HTML

<div class='responsive_div'>
<div id="testing2" >
<div  id="1" > 1 </div>
<div  id="2" > 2 </div>
</div>
</div>

jQuery

$(document).ready(function () {
is_set = false
$(window).on("resize", function () {
var $theWindowSize = $(this).width();
if ($theWindowSize <= 700) {
if (is_set == false){
options = ''
$("#testing2 div").each(function () {
console.log("hello", this.id)
options += "<option value=" + this.id + ">" + this.innerHTML + "</option>"
});
$('.responsive_div').html('<select id="tesing2">'+ options +'</select>')
}
is_set = true
} else if ($theWindowSize >= 701) {
console.log("else part is excuted ");
$('.responsive_div').html("<div id='testing2'><div id='1'> 1 </div><div id='2'> 2 </div></div>")
is_set = false
}
});
});