javascript - 我想在每次单击按钮时执行一个函数使用 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

如果我选择任何颜色，除了我们选择的颜色外，其他颜色都不会显示，它也会显示“左 20 像素”: 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');
});