Question

我正在尝试将这两个功能合二为一。我知道必须有一个非常简单的方法来做到这一点，但到目前为止我所尝试的一切都没有用。基本上有两个图标和两个菜单。当您单击一个图标时，菜单会根据它们所处的状态下降（或提升）。变量之后的所有内容都是相同的，因此将它们合并为一个共享函数似乎是有意义的。任何帮助将不胜感激。谢谢！

$(function(){

///Manage Icon 1
$('.ecGlobalNavStudentIcon').click(function(e){
    var n = 'hideme'
    var m = $('#ecGlobalNavStudentPanel')
    var p = $('#ecGlobalNavStaffPanel')

            e.preventDefault(); //just prevent the default behavior of the hyperlink
    if(m.hasClass(n)) {
        console.log($(m).attr('id') + " Has 'hideme' gonna open up");
        $(m).show().removeClass(n);
        $(m).animate({
            height:'49px'
        },
        500, // Duration
        function() { // Callback when the animation is finished
            console.log($(m).attr('id') + " Opened!");
        });
    } else {
        console.log($(m).attr('id') + " didn't have 'hideme' gonna try and   
                close. ");
        $(m).animate({
            height:'0px'
        },
        500, // Duration
        function() { // Callback when the animation is finished
            $(m).hide().addClass(n);
            console.log($(m).attr('id') + " Closed!");
        });
    }
    if(!$(p).hasClass(n)) {//open
        console.log($(p).attr('id') + "  panel open! Gonna close.");
        $(p).animate({//close

            height:'0px'
        },//close
        500, // Duration
        function() { // Callback when the animation is finished /open
            console.log($(p).attr('id') + " Closed by animation!");
        $(p).hide().addClass(n);
        });//close


    }

});



///Manage Icon 2
$('.ecGlobalNavStaffIcon').click(function(e){
    var n = 'hideme'
    var m = $('#ecGlobalNavStaffPanel')
    var p = $('#ecGlobalNavStudentPanel')

    e.preventDefault(); //just prevent the default behavior of the hyperlink
    if (m.hasClass(n)) {
        console.log($(m).attr('id') + " Has 'hideme' gonna open up");
        $(m).show().removeClass(n);
        $(m).animate({
            height: '49px'
        },
        500, // Duration
        function () { // Callback when the animation is finished
            console.log($(m).attr('id') + " Opened!");
        });
    } else {
        console.log($(m).attr('id') + " didn't have 'hideme' gonna try and close. ");
        $(m).animate({
            height: '0px'
        },
        500, // Duration
        function () { // Callback when the animation is finished
            $(m).hide().addClass(n);
            console.log($(m).attr('id') + " Closed!");
        });
    }
    if (!$(p).hasClass(n)) {//open
        console.log($(p).attr('id') + "  panel open! Gonna close.");
        $(p).animate({//close

            height: '0px'
        },//close
        500, // Duration
        function () { // Callback when the animation is finished /open
            console.log($(p).attr('id') + " Closed by animation!");
            $(p).hide().addClass(n);
        });//close


    }
});

});

Answer 1

如果您想为多个选择器处理相同的事件，请使用逗号分隔的选择器..在您的情况下

$('.ecGlobalNavStudentIcon, .ecGlobalNavStaffIcon').click(function(){
//Your common event handler
});

永远记住，重复代码是邪恶的，这表明你已经犯了一些错误。而且你找到了很棒的工作:)快乐的编码

Answer 2

将DOM事件处理与实际逻辑分开总是好的。

icon1单击，icon2单击触发事件A

事件A上的

执行操作A＆＃39;

考虑这个例子：

  $(body).on('togglePanels.my', function (e, activePanel ) {
         var panels = $('.panels')           
         panels.removeClass(cssClass)
         activePanel.addClass(cssClass)   
  })

  $(body).on('click','.panelHeader' function(e) {
        var $this= $(this)
         , panel = $('#' + $this.data('target'))
        $(body).trigger('togglePanels.my', [panel])
  })

这几乎是您正在构建的手风琴所需的所有代码，但动画效果除外请注意，它需要您稍微更改标记：

为面板添加了常见的.panel类
另一个.panelHeader图标
图标具有data-target属性，其中包含要打开的面板ID。
而不是隐藏面板的hide-me类，cssClass应该保存css类的名称以打开活动的

示例标记：

<div>
    <i class="panelHeader ecGlobalNavStudentIcon" 
       data-target="ecGlobalNavStudentPanel">Student</i>
    <i class="panelHeader ecGlobalNavStuffIcon" 
       data-target="ecGlobalNavStaffPanel">Stuff</i>
</div>
<div id='ecGlobalNavStudentPanel' 
     class="panel ecGlobalNavStudentPanel">...</div>
<div id='ecGlobalNavStaffPanel' 
     class="panel ecGlobalNavStaffPanel">...</div>

Answer 3

这样的事情会起作用：

$('.ecGlobalNavStudentIcon, .ecGlobalNavStaffIcon').click(function(e){
    var n = 'hideme'
    var m = $(e.target).hasClass('ecGlobalNavStudentIcon') ? $('#ecGlobalNavStudentPanel') : $('#ecGlobalNavStaffPanel');
    var p = $(e.target).hasClass('ecGlobalNavStudentIcon') ? $('#ecGlobalNavStaffPanel') : $('#ecGlobalNavStudentPanel');

Answer 4

    $('.ecGlobalNavStaffIcon, ecGlobalNavStaffIcon').click(function(e){
var n = 'hideme';
if this.hasClass('ecGlobalNavStaffIcon'){
    var m = $('#ecGlobalNavStudentPanel')
    var p = $('#ecGlobalNavStaffPanel')
}
else {
var m = $('#ecGlobalNavStaffPanel')
    var p = $('#ecGlobalNavStudentPanel')
}
...
}

如果需要，只需应用一个参数然后使用相同的代码（例如：$('#'+myParamToSelect).function()

如何组合两个JQuery函数？

4 个答案: