我想在每次单击按钮时使用JQuery执行一个函数

Question

我想使用jQuery和CSS(以及ofc-php，但这与我的问题无关(创建一个颜色的动态列表。

当他们点击"选择颜色"按钮时，会出现一个问题，我的颜色列表会出现，如果用户点击其中任何一个，其他人都不会显示，如果用户试图更改所选颜色，这是一个问题！

<div class="onfocus">
<div class="color-select">
<ul class="ul-color">              
<li id="slect-color"><a href="#">choose a color</a></li>
<li><a href="#">color1</a></li>
<li><a href="#">color2</a></li>
<li><a href="#">color3</a></li>
<li><a href="#">color4</a></li>
<li><a href="#">color5</a></li>                
</ul>
</div>
</div>

$('.ul-color li').on('click',function(){        
$(this).css('display','none');
for(var x = 0 ; x < 10; x++){
$('.ul-color li').eq(x).css('left', 90*x+'px');
}
$('.ul-color li').click(function(){         
$('.ul-color li').css('display','none');
$(this).css('display','block');
$(this).css('left','20px');            
});
});

.onfocus{
position: absolute;
left : 50%;
top :50%;
width: 1700px;
height: 300px;
background-color: #2c3e50;
transform: translate(-50%,-50%);
}
.color-select{
margin-top: 20px;
margin-left: 20px;
}
.color-select ul{
list-style: none;
max-width: 70px;
display: flex;  
}
.color-select ul li{
margin-right: 10px;
padding: 10px;
position: absolute;
transition: .5s;  
}
.color-select ul li:nth-child(1){
z-index: 10;
background-color: black;
border-radius: 5px;
}
.color-select ul li+li{
left: 20px;
}
.color-select ul li a{
color : #fff    
}
.color-select ul li:hover{
background-color: #e74c3c;
border: none;
border-radius: 5px;
}

单击之前：pic-1

单击"选择颜色"后：pic-2

如果我选择任何颜色，其他人都会得到一个显示，除了我们选择的颜色之外，其他人也会得到"左20px"：pic-3

所以现在，如果我想改变我选择的颜色，我必须点击上一张，它应该是第二张照片，但什么都不会发生pic-4

Answer 1

试试这个，

HTML

<div class="onfocus">
<div class="color-select">
<ul class="ul-color">
<li id="slect-color"><a href="#">choose a color</a></li>
<li class="color"><a href="#">color1</a></li>
<li class="color"><a href="#">color2</a></li>
<li class="color"><a href="#">color3</a></li>
<li class="color"><a href="#">color4</a></li>
<li class="color"><a href="#">color5</a></li>
</ul>
</div>
</div>

CSS

.ul-color{
list-style-type:none;
display:flex;
}
.ul-color li{
margin:5px 10px;
border-radius:5px;
background:#333;
display:none;
}
.ul-color li a{
text-decoration:none;
display:inline-block;
padding:10px 15px;
color:#FFF;
border-radius:5px;
}
.ul-color li a:hover{
background:#e74c3c;
}
#slect-color{
display:inline-block;
}

Javascript

$('#slect-color').on('click',function(){    
$('ul li').show();
});
$('.color').on('click',function(){   
$('.color').hide();
$(this).css('display','block');
});

Answer 2

这有点太复杂了，无法用display: block和display: none处理所有内容。我稍微修改了您的代码，添加了几个类：

• ul.initial是您的初始状态，其中"选择颜色"可见
• ul.opened是显示所有颜色时，用于拾取一种颜色
• li.selected是您选择的颜色

您想要的是任何li在以下情况下显示：

• 我们处于初始状态，li是"选择颜色">
• 我们已经打开了列表，li不是"选择颜色"的
• li是选定的

以下是您感兴趣的CSS部分：

.color-select ul.initial #select-color,
.color-select ul.opened li:not(#select-color),
.color-select ul li.selected {
display: block;
}

下面是一个基于您的代码的工作片段，并进行了改进：

$('.ul-color li').on('click',function() {
var list = $('.ul-color');

if (!list.hasClass('opened')) {
// Show all colors
$('.ul-color li').removeClass('selected');
} else {
// A color has been picked
$(this).addClass('selected');
}

list.toggleClass('opened');
list.removeClass('initial');
});

.onfocus{
/* Be careful, this part one changed only to be visible in the snippet */
position: absolute;
width: 100%;
height: 300px;
background-color: #2c3e50;
}
.color-select {
margin-top: 20px;
margin-left: 20px;
}
.color-select ul {
list-style: none;
display: flex;  
}
.color-select ul li {
margin-right: 10px;
padding: 10px; 
display: none;
z-index: 10;
background-color: black;
border-radius: 5px;
}
.color-select ul.initial #select-color,
.color-select ul.opened li:not(#select-color),
.color-select ul li.selected {
display: block;
}
.color-select ul li a {
color : #fff    
}
.color-select ul li:hover{
background-color: #e74c3c;
border: none;
border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="onfocus">
<div class="color-select">
<ul class="ul-color initial">              
<li id="select-color"><a href="#">choose a color</a></li>
<li><a href="#">color1</a></li>
<li><a href="#">color2</a></li>
<li><a href="#">color3</a></li>
<li><a href="#">color4</a></li>
<li><a href="#">color5</a></li>                
</ul>
</div>
</div>