带有 jQ​​uery 的按钮边框

Question

我在白色背景下有一个灰色边框的按钮，当点击按钮时它会滑动菜单。

当用户点击按钮时，按钮底部边框变为白色并下拉菜单，如果用户从菜单中点击，按钮将向上滑动，按钮底部边框变为红色。

我正在尝试单独解决按钮问题，如果在按钮显示白色底部边框时未单击下拉菜单内部，但再次单击按钮以向上滑动，向上滑动后我想将按钮底部边框更改为灰色的。

这里是代码...

这样做的作用是当单击按钮时，它将按钮底部边框更改为透明和滑动菜单。

$(document).ready(function(){
            $(".dropdown dt a").click(function() {
                $(this).css('border-bottom', 'solid 1px transparent' );
                $(".dropdown dd #md").slideToggle();
                });

这样做是当单击按钮时，它将按钮底部边框更改为透明和向下滑动菜单，当单击菜单内部的选项之一时，它将向上滑动并将底部边框按钮更改为蓝色。

$(".dropdown dd ul li a").click(function() {

          var text = $(this).html();
          $(".dropdown dt a span").html(text);
          $(".dropdown dd #md").slideUp();
    $('.dropdown dt a').css('border-bottom', 'solid 1px blue' );
          });

这样做是当单击按钮时，它将按钮底部边框更改为透明和向下滑动菜单，当单击菜单区域外部的选项之一时，它将向上滑动并将底部边框按钮更改为蓝色。

$(document).bind('click', function(e) {

          var $clicked = $(e.target);
          if (! $clicked.parents().hasClass("dropdown"))
          $(".dropdown dd #md").slideUp();    
     $('.dropdown dt a').css('border-bottom', 'solid 1px blue' );

          });

如果人们再次从按钮单击到滑动菜单并将底部边框底部更改为灰色，任何人都可以帮助我如何编写代码！

谢谢。

Answer 1

http://api.jquery.com/slideToggle/

http://api.jquery.com/toggleClass/

CSS

.active{
    border-bottom:solid 1px blue;
}

js

$(document).bind('click', function (e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd #md").slideToggle();
    $('.dropdown dt a').toggleClass('active');
});

Answer 2

使用类来实现这一点。使用 css 并附加颜色和边框等属性。即时添加和删除类。在我看来，这会更容易。