Question

我遇到的主要问题是toggleClass（）。由于我不是jQuery最好的，我不知道该搜索什么。这是我的代码：

JS

jQuery.noConflict();

jQuery(document).ready(function() {

    jQuery('.quickLinks').click(function() {

        var options = {direction: 'right'};
        var duration = 400;

        jQuery('#quickLinks').slideToggle(options, duration);
        jQuery('.quickLinks').toggleClass('sidebar-blue');
    });

    jQuery('.quickLinks').hover(function() {

        jQuery(this).css({
            'border-top-color': '#1C8BE6',
            'color': '#1C8BE6'
        });
    }, function() {

        jQuery(this).css({
            'border-top-color': '#003663',
            'color': '#fff'
        });
  });
});

CSS

/** Style for the button & div **/

.sidebar {
  position: fixed;
  bottom: 0;
  z-index: 100;
  width: 100%;
  display: block;
}

.quickLinks, #quickLinks {
  float: right;
  margin-left: 100%;
  width: 230px;
}

.quickLinks {
  cursor: pointer;
  padding: 10px 0px 5px;
  background-color: #003663;
  white-space: nowrap;
  text-align: center;
  font-family: 'Just Another Hand', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 26px;
  color: #fff;
  border-top: 3px solid #003663;
  border-radius: 5px 5px 0px 0px;
}

.quickLinks.sidebar-blue {
  line-height: 20px;
  color: #1C8BE6 !important;
  border-top: 3px solid #1C8BE6 !important;
}

#quickLinks {
  position: relative;
  display: none;
  background-color: #003663;
  right: 0px;
  z-index: 100;
}

#quickLinks > ul {
  list-style-type: none;
  float: right;
  margin: 5px 10px;
  padding-left: 0px;
}

#quickLinks > ul > a > li {
  color: #fff;
  white-space: nowrap;
}

#quickLinks > ul > a > li:hover {
  color: #1C8BE6;
}

当我展开菜单时，头文字为蓝色。再次点击它以向下滑动菜单后，＆＃34;快速链接＆＃34;在移动鼠标之前，文本仍为蓝色。我希望在再次点击或滑动转换完成后更改正确。

我的另一个问题是每当第二次点击时，菜单会跳转。在返回之前它会上升几个像素。它并没有在我使用它的实际网站上发生，但它在jsfiddle中发生。我想知道原因。

到目前为止我在这里：

Fiddle

toggleClass和slideToggle错误

0 个答案: