jQuery切换下拉列表不工作

Question

我正在创建一个带有jQuery和toggle功能的下拉列表，因为我希望选择器可以通过自定义滚动条显示的下拉选项进行单击。

到目前为止，我有一些这样的代码：JSFiddle

$(".row-span").click(function(){
$("#expandDropDown").toggleClass('drop');
$("#quantitySelectDrop").toggleClass('active');
$(".mCSB_container").mCustomerScrollbar();
$(".active-result").hover(function(){
$(this).toggleClass('highlighted').siblings().removeClass('highlighted');})})

单击div时，将显示具有各种选项的下拉菜单，同时，单击/切换选择器时，选择器上的箭头将从下变为上。当鼠标悬停在选项上时，选项的背景色将变为灰色。

我的预期结果应该是这样的：

但是我不能将下拉菜单从-9000px推到0px以显示它。

在click函数中，我包含了两个触发动作的切换类。然而，即使将“active”类添加到div中，下拉菜单的位置仍然没有改变并出现。

我不确定这是我的逻辑错误，还是我不应该把两个切换类放在一个点击函数下。如何在相同的点击功能下触发两个切换更改？谢谢你！！

Answer 1

JS Fiddle代码在这里

这是小提琴。您将错误的样式应用为位置：-900px，并尝试应用并尝试使用类名进行切换。没有在您的小提琴中链接JQuery JS文件。

HTML：请选择

<div class="drop-row" id="qualitySelectorDrop" >

<div class="drop-search">
 <ul class="drop-result mCustomScrollbar mCS1" tabindex="-1" style="width:38px; position:absolute; top:20px; left:0">
  <div id="mCSB1" class="mCustomScrollBox mCSB_vertical mCSB_5" tabindex="0" style="max-height:130px;"> 
  <div id="mCSB1_container" class="mCSB_container" style="position:relative; top:0px; left:0px; overflow:auto;">
  </div>
  <li class="active-result">1</li>
  <li class="active-result">2</li>
  <li class="active-result">3</li>
  <li class="active-result">4</li>
  <li class="active-result">5</li>
  <li class="active-result">6</li>
  <li class="active-result">7</li>
  <li class="active-result">8</li>

  </div>

  <div id="mCSN1_scrollbar_vertical" class="mCSB1_scrollTools mCSB1_scrollbar mCSB1_scrollTools_vertical" style="display:block;">
  <div class="mCSB_draggerContainer">
   <div id="mCSB1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height:30px; top:0px; display:block; height:31px; max-height:120px;" oncontextmenu="return false;">
   <div class="mCSB_dragger_bar" style="line-height:30px">
    </div>

    <div class="mCSB_draggerRail"></div>

    </div>
  </div>
  </div>

  </ul>
</div>
</div>

JavaScript:

 $(".row-span").click(function(){
//$("#expandDropDown").toggle('drop');
 $("#quantitySelectDrop").toggle();
 $('.drop-row').toggle();
 $(".mCSB_container").mCustomerScrollbar();

 $(".active-result").hover(function(){
$(this).toggleClass('highlighted').siblings().removeClass('highlighted');
})
 })

CSS:

#quantitySelectDrop.active{
 left:0px;
}

#quantitySelectDrop{
position:relative; display:none
}

.active-result.highlighted{
  background-color:red;
 }

 .drop-search{height:200px; display:block; width:500px}

Answer 2

好吧，这里有几件事。

1. 在JavaScript设置中没有启用jQuery，所以你得到了$is not a函数错误
2. 代码拼写不一致。有的地方说“质量”，有的地方说“数量”。此外，一些地方说“选择”，另一些地方说“选择器”

编辑：我忘了提到我还将内联样式移到了样式表中。您可能很难让类重写内联样式，所以如果可以的话，我会这样做。如果没有，您可以尝试！重要信息或使用jQuery。css（）属性切换样式，而不是切换类。

可根据需要扩展的缩写jQuery：

$(function(){
  $('#expandDropDown').click(function(){
     $('#qualitySelectorDrop').toggleClass('active');
     $("#expandDropDown").toggleClass('drop');
  });
});

#expandDropDown {
  color: blue;
}
#expandDropDown.drop{
  /*changing the selector arrow from down to up*/
  color: red;
}
.active-result.highlighted{
  background-color:red;
}
.mCustomScrollbar {
  width: 38px;
  position: absolute;
  left: -9000px;
}
.mCustomScrollbar.active {
  left: 0;
}
#qualitySelectorDrop {
  left: -9000px;
  width: 59px;
  top: 29px;
  height: 100px;
  background: blue;
  position: absolute;
}
#qualitySelectorDrop.active {
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <a class="row-span" id="expandDropDown" style="width:61px;">
    <span>Please Select</span>
  <!-- <div><b></b></div> -->
  </a>  
</div>

<div class="drop-row" id="qualitySelectorDrop">
  <div class="drop-search">
    <ul class="drop-result mCustomScrollbar mCS1" tabindex="-1">
      <div id="mCSB1" class="mCustomScrollBox mCSB_vertical mCSB_5" tabindex="0" style="max-height:130px;"> 
        <div id="mCSB1_container" class="mCSB_container" style="position:relative; top:0px; left:0px; overflow:auto;"></div>
          <li class="active-result">1</li>
          <li class="active-result">2</li>
          <li class="active-result">3</li>
          <li class="active-result">4</li>
          <li class="active-result">5</li>
          <li class="active-result">6</li>
          <li class="active-result">7</li>
          <li class="active-result">8</li>
        </div>

      <div id="mCSN1_scrollbar_vertical" class="mCSB1_scrollTools mCSB1_scrollbar mCSB1_scrollTools_vertical" style="display:block;">
      <div class="mCSB_draggerContainer">
        <div id="mCSB1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height:30px; top:0px; display:block; height:31px; max-height:120px;" oncontextmenu="return false;">
          <div class="mCSB_dragger_bar" style="line-height:30px"></div>
            <div class="mCSB_draggerRail"></div>
          </div>
         </div>
      </div>
    </ul>
  </div>
</div>