javascript - 如何在 html anchor 上调用已有的 jquery 函数？

Question

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

我特别尝试在每个 anchor 上调用 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 anchor 是:

        <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

如果我理解正确的话，您不想触发 anchor 的单击事件，而是希望在单击 anchor 时触发相应导航元素的单击事件。

您可以通过在文档就绪函数中添加以下代码来做到这一点:

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

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

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

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