Question

我使用jquery在具有唯一ID的几个div上创建了可扩展内容。代码正在运行，但现在我也希望使用锚从顶部导航触发此功能。我尝试了几件事，但没有任何作用。我对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();
});

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

在这种情况下，你不应该放置＆＃34; onclick＆＃34; <a>元素的属性。

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

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

2 个答案: