Question

HTML：

 <div class="selectContainer">
            <ul>
                <li class="init">Select</li>
                <li data-value="value 1">Option 1</li>
                <li data-value="value 2">Option 2</li>                                                          
            </ul>
  </div>

CSS：

 .selectcontainer ul li
  {
    border:1px solid green;
    width:100%;
    cursor:pointer;
  }
 .selectcontainer ul li:not(.init){
    display:none;
    float:left;
  }
 li.init{cursor:pointer; background:url("../images/arrow-down.png") right no-repeat;}
 li.init1 { cursor: pointer; background:url("../images/arrow-up.png") right no-repeat;}

JQuery的：

      jQuery(document).ready(function () {

        $( "ul" ).click(function() {
        $(this).closest("ul").children('li:not(.init)').slideToggle(200);
        });

        $( "li" ).click(function() {
        $("li .init").addClass("li .init1");
        });
   });

嗨我只需要在下拉打开箭头和关闭箭头时更改我的图像。此代码无效请求帮助。

Answer 1

<强>解决：

您点击<li>时没有切换“init1”类（第一个<ul>），因此点击时箭头没有变化。

$("ul").click(function () {
    $(this).children('li:not(.init)').slideToggle(200);
    $(this).find("li.init").toggleClass("init1");
});

下面是JS小提琴工作示例，我使用了特殊字符，并且：在向上/向下箭头的伪类之后，您可以根据自己的需要进行更改。

http://jsfiddle.net/4C5ND/

Answer 2

非常简单.U可以在点击时使用transform:rotate(180deg); CSS。

Answer 3

你可以尝试：

if($(this).hasClass("class1")){
 $(this).removeClass("class1").addClass("class2");
}else{
 $(this).removeClass("class2").addClass("class1");
}

如何在单击下拉列表时更改箭头图标

3 个答案: