jQuery 切换下拉菜单不起作用

Question

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

到目前为止，我有一些这样的代码：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时，会出现一个下拉菜单，其中包含各种选项，同时选择器上的箭头会在clicked/toggled时由下变为上。 .当鼠标悬停在选项上时，选项的背景色会变成灰色

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

但是我无法将下拉菜单从 -9000px 推到 0px 以使其显示。

在点击功能中，我添加了两个开关类来触发动作。但是，即使把"active"的class加到div中，下拉菜单的位置还是没变，还是出现了。

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

Answer 1

好的，这里发生了一些事情。

未在 JavaScript 设置中启用 jQuery，因此您收到“$ 不是函数”错误
代码拼写不一致。有的地方说"quality,"有的地方说"quantity."还有的地方说"select,"有的地方说"selector."

编辑：我忘了提到我还将您的内联样式移到了样式表中。您可能很难让类覆盖内联样式，所以如果可以的话我会这样做。如果没有，您可以尝试 !important 或使用 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>

工作 fiddle 在这里：https://jsfiddle.net/59y9jaef/4/

Answer 2

JS Fiddle Code is here

这是有效的 fiddle。您将错误的样式应用为 position:-900px 并尝试应用并尝试使用 class 名称进行切换。没有 link JQuery JS 文件在你的 fiddle.

HTML: 请Select

<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}

jQuery 切换下拉菜单不起作用

jQuery toggle dropdown not working

html

css

jquery

toggle

drop-down-menu