如何在 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

如果我没理解错的话，你并不是想触发锚点的点击事件，而是想在点击锚点时触发相应导航元素的点击事件。

您可以通过在文档就绪函数中添加以下代码来实现：

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

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

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

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

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

How do invoke an already existing jquery function on an html anchor?

html

javascript

anchor

jquery

invoke