Question

我有一个菜单，它应该作为点击菜单工作，所以当点击按钮时会出现一个菜单，当再次点击该按钮时，菜单应该消失，但我不能让它工作？

我有这个脚本

<script type="text/javascript">
      $(document).ready(function() { 
        $('#dropdown').click(function(){
            setTimeout(function(){
                $('#dropdown').attr("id", "dropdown2");
                $('#dropmenu').addClass("open");
                //$('#dropmenu').fadeIn('fast');
            },500);
        })
        $('#dropdown2').click(function(){
            setTimeout(function(){
                $('#dropdown').attr("id", "dropdown");
                $('#dropmenu').removeClass("open");
                //$('#dropmenu').fadeIn('fast');
            },500);
        })
      });
    </script>

在添加类时它会起作用，但是当我再次单击该按钮时，它不会删除“打开”类

Answer 1

编写$('#dropdown').attr("id", "dropdown2");后，第二个处理程序中的代码没有#dropdown元素匹配。
此外，绑定第二个处理程序时，还没有#dropdown2元素。（live事件将解决该问题）

相反，您应该使用toggle event，它允许您绑定将执行每次其他点击的多个click处理程序。

例如：

$(document).ready(function() { 
    $('#dropdown').toggle(
        function() {
            setTimeout(function(){
                $('#dropdown').addClass("open")
                              .fadeIn('fast');
            }, 500);
        },
        function() {
            setTimeout(function(){
                $('#dropdown').removeClass("open")
                              .fadeOut('fast');
            }, 500);
        }
    );
});

Answer 2

它不起作用的原因是当您注册单击处理程序时，dropdown2 id不会退出。您可以使用它来克服这个问题，但最好使用类：

  $(document).ready(function() { 
    $('#dropdown').click(function(){
        if (!$(this).hasClass("open")) {
          setTimeout(function(){
              $('#dropmenu').addClass("open");
             //$('#dropmenu').fadeIn('fast');
          },500);
       } else {
        setTimeout(function(){
            $('#dropmenu').removeClass("open");
            //$('#dropmenu').fadeIn('fast');
        },500);
      }
    })
  });

Answer 3

我更新了上面的代码，对我有用。请试试这个，

angular.module('app').filter('limitLetters', function() {
    /**
     * Limits the letters of the input string
     * @param value {string} the string to be limited
     * @param max {number} the max number of letters allowed
     */
    return function(value, max) {
        if (!value) return '';
        max = parseInt(max, 10);
        if (!max) return value;
        if (value.length <= max) return value;
        value = value.substr(0, max);
        return value + ' …';
    };
});

addClass＆amp; removeClass不工作

3 个答案: