Question

我找到了ul选择框的代码。我需要3个不同的ul选择框。所以我做了一些更改，但现在只是向上滑动“年份”选择框。 “选定”标签有问题吗？

原始代码：

$("ul").on("click", ".init", function() {
    $(this).closest("ul").children('li:not(.init)').slideDown();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.slideUp();
});

ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
    <li class="init">[SELECT]</li>
    <li data-value="value 1">Option 1</li>
    <li data-value="value 2">Option 2</li>
    <li data-value="value 3">Option 3</li>
</ul>

我的代码：

$(".day ul").on("click", ".active", function() {
    $(this).closest(".day ul").children('li:not(.active)').slideDown();
});

var allOptions = $(".day ul").children('li:not(.active)');
$(".day ul").on("click", "li:not(.active)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $(".day ul").children('.active').html($(this).html());
    allOptions.slideUp();
});

$(".month ul").on("click", ".active", function() {
    $(this).closest(".month ul").children('li:not(.active)').slideDown();
});

var allOptions = $(".month ul").children('li:not(.active)');
$(".month ul").on("click", "li:not(.active)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $(".month ul").children('.active').html($(this).html());
    allOptions.slideUp();
});

$(".year ul").on("click", ".active", function() {
    $(this).closest(".year ul").children('li:not(.active)').slideDown();
});

var allOptions = $(".year ul").children('li:not(.active)');
$(".year ul").on("click", "li:not(.active)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $(".year ul").children('.active').html($(this).html());
    allOptions.slideUp();
});

.day, .month, .year{
float:left;
width:100px;
display:block;
width:auto;
height: 34px;
}
.day ul, .month ul, .year ul {
  list-style-type:none;
	cursor: pointer;
	width: 100px;
	}

.day ul li, .year ul li, .month ul li {
	float: left;
  width:100px;
	text-indent: 5px;
	height: 34px;
	line-height: 34px;
  border:1px solid #000;
	background: #fff;
}
.day ul li.active, .month ul li.active, .year ul li.active {	
}
.day ul li a, .month ul li a, .year ul li a {
	text-decoration: none;
	color: #000;
}
.day ul li:not(.active), .month ul li:not(.active), .year ul li:not(.active) {
	float: left;
	display: none;
}
.day ul li:not(.active):hover, .day ul li.selected:not(.active), .month ul li:not(.active):hover, .month ul li.selected:not(.active), .year ul li:not(.active):hover, .year ul li.selected:not(.active) {
	background: #f5f5f5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="day">
<ul>
<li class="active"><a href="#">Day</a></li>
<li><a href="#">01.08</a></li>
<li><a href="#">02.08</a></li>
<li><a href="#">03.08</a></li>
<li><a href="#">04.08</a></li>
<li><a href="#">05.08</a></li>
</ul>
</div>

<div class="month">
<ul>
<li class="active"><a href="#">Month</a></li>
<li><a href="#">01</a></li>
<li><a href="#">02</a></li>
<li><a href="#">03</a></li>
<li><a href="#">04</a></li>
<li><a href="#">05</a></li>
</ul>
</div>

<div class="year">
<ul>
<li class="active"><a href="#">Year</a></li>
<li><a href="#">2016</a></li>
<li><a href="#">2017</a></li>
<li><a href="#">2018</a></li>
<li><a href="#">2019</a></li>
<li><a href="#">2020</a></li>
</ul>
</div>

Answer 1

你只需要用迭代器包装原始代码，你的问题就会得到解决。

带有3个UL标签的

I have create an example on codepen，您可以复制并粘贴UL块，以使相同的代码适用于所有UL标签

这就是你的js代码应该是什么样的。

JS：

$(document).ready(function(){

  $("ul").each(function(){

    var $thisUL = $(this);
    $thisUL.on("click", ".init", function() {
        $(this).closest("ul").children('li:not(.init)').slideDown();
    });

    var allOptions = $thisUL.children('li:not(.init)');
    $thisUL.on("click", "li:not(.init)", function() {
        allOptions.removeClass('selected');
        $(this).addClass('selected');
        $thisUL.children('.init').html($(this).html());
        allOptions.slideUp();
    });

  });

});

如何更改脚本以使用更多UL选择框？

1 个答案: