如何调用HTML锚点上已经存在的jquery函数？

Question

我在多个具有唯一ID的div上使用jquery创建了可扩展内容。 代码正在运行，但现在我也想使用锚从顶部导航中触发此功能。 我尝试了几件事，但是没有任何效果。 我对jquery非常陌生，因此将不胜感激。

我专门尝试在每个锚点上调用click()函数。

这是我的jQuery：

(function($) {
    $(document).ready(function () {
        var panelspeed = 500; 
        var totalpanels = 6; 
        var defaultopenpanel = 0; 
        var accordian = true;  
        var panelheight = new Array();
        var currentpanel = defaultopenpanel;
    var iconheight = parseInt($('.icon-close-open').css('height'));
    var highlightopen = true;

    //Initialise collapsible panels
    function panelinit() {
            for (var i=1; i<=totalpanels; i++) {
                panelheight[i] = parseInt($('#cp-'+i).find('.expandable-panel-content').css('height'));
                $('#cp-'+i).find('.expandable-panel-content').css('margin-top', -panelheight[i]);
                if (defaultopenpanel == i) {
                    $('#cp-'+i).find('.icon-close-open').css('background-position', '0px -'+iconheight+'px');
                    $('#cp-'+i).find('.expandable-panel-content').css('margin-top', 0);
                }
            }
    }

    $('.expandable-panel-heading').click(function() {
        var obj = $(this).next();
        var objid = parseInt($(this).parent().attr('ID').substr(3,2));
        currentpanel = objid;
        if (accordian == true) {
            resetpanels();
        }

        if (parseInt(obj.css('margin-top')) <= (panelheight[objid]*-1)) {
            obj.clearQueue();
            obj.stop();
            obj.prev().find('.icon-close-open').css('background-position', '0px -'+iconheight+'px');
            obj.animate({'margin-top':0}, panelspeed);
            if (highlightopen == true) {
                $('#cp-'+currentpanel + ' .expandable-panel-heading').addClass('header-active');
            }
        } else {
            obj.clearQueue();
            obj.stop();
            obj.prev().find('.icon-close-open').css('background-position', '0px 0px');
            obj.animate({'margin-top':(panelheight[objid]*-1)}, panelspeed);
            if (highlightopen == true) {
                $('#cp-'+currentpanel + ' .expandable-panel-heading').removeClass('header-active');
            }
        }
    });

    function resetpanels() {
        for (var i=1; i<=totalpanels; i++) {
            if (currentpanel != i) {
                $('#cp-'+i).find('.icon-close-open').css('background-position', '0px 0px');
                $('#cp-'+i).find('.expandable-panel-content').animate({'margin-top':-panelheight[i]}, panelspeed);
                if (highlightopen == true) {
                    $('#cp-'+i + ' .expandable-panel-heading').removeClass('header-active');
                }
            }
        }
    }

   //Uncomment these lines if the expandable panels are not a fixed width and need to resize
   $( window ).resize(function() {
      panelinit();
    });

    $(window).load(function() {
        panelinit();
    }); //END LOAD
}); //END READY

})(jQuery);

可扩展jquery内容的html是：

<div class="expandable-panel" id="cp-3">
    <div class="expandable-panel-heading">
        <h2>Testimonials<span class="icon-close-open"></span></h2>
     </div>
    <div class="expandable-panel-content">
        <p>Panel HTML...</p>
    </div>
</div>

我要触发click()函数的html锚是：

        <ul class="nav">
            <a href="#cp-1" onclick="$( "a" ).trigger( "click" );"><li class="nav">What is Justice Court Judge?</li></a>
            <a href="#cp-2"><li class="nav">About Reeves Jones</li></a>
            <a href="#cp-3"><li class="nav">Testimonials</li></a>
            <a href="#cp-4"><li class="nav">Polling Locations</li></a>
            <a href="#cp-5"><li class="nav">Map</li></a>
            <a href="#cp-6"><li class="nav">Contact</li></a>
        </ul>

预先感谢您的帮助！

Answer 1

我建议不要使用内联事件处理程序。

您可以将以下内容添加到您的jquery代码中：

$(".nav").find('a').trigger("click");

$(".nav").find('a').click(function(){
    //your code
})

Answer 2

如果我理解正确，那么您不想触发锚点的click事件，而是想在单击锚点时触发相应导航元素的click事件。

您可以通过在准备文档的函数中添加以下代码来做到这一点：

$('.nav a').click(function() {
    $($(this).attr('href')).find('.expandable-panel-heading').click();
});

此代码在.nav元素内的所有<a>元素上注册一个单击处理程序。 它使用单击的<a>元素的href值来获取表示导航元素的jQuery对象。

在这种情况下，不应将“ onclick”属性放在<a>元素上。

顺便说一句：对于有效的HTML，您应该将<a>元素嵌套在<li>元素内，而不是相反。