Question

如何让这个功能更加通用，这样如果用户点击图像（＃accordion-arrow），它还会触发.click事件？

这里有JS和手风琴菜单的标记：

<script>
    $(document).ready(function() {
        $('#DDAccordion > ul > li > a').click(function() {
            var checkElement = $(this).next()
            $('#DDAccordion li').removeClass('active');
            $(this).closest('li').addClass('active');
            if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                $(this).closest('li').removeClass('active');
                checkElement.slideUp('normal');
            }
            if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#DDAccordion ul ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
            }
            if ($(this).closest('li').find('ul').children().length == 0) {
                return true;
            } else {
                return false;
            }
        });
    });
</script>

<div id="DDAccordion">
    <ul>
        <li><a href="#">See All Products</a>
            <ul>
                <span id="DDAccordionGroup1">
    <li class="DDAccordionItem">
    <a href="/depot-deals/airflow/index.htm#airflow">
    <img src="/images/depot-deals/airflow_dd_icon.png" alt="Airflow">
    <span class="DDAccordionLink">Airflow</span></a>
        </li>
        <li class="DDAccordionItem">
            <a href="/depot-deals/cable-certification/index.htm#cable-certification">
                <img src="/images/depot-deals/cable-certification_dd_icon.png" alt="Cable Certification">
                <span class="DDAccordionLink">Cable Certification</span></a>
        </li>
        </span>
        <span id="DDAccordionGroup2">
    <li class="DDAccordionItem">
    <a href="/depot-deals/borescopes/index.htm#borescopes">
    <img src="/images/depot-deals/borescopes_dd_icon.png" alt="Borescopes">
    <span class="DDAccordionLink">Borescopes</span></a>
        </li>
        <li class="DDAccordionItem">
            <a href="/depot-deals/clamp-meters/index.htm#clamp-meters">
                <img src="/images/depot-deals/clamp-meters_dd_icon.png" alt="Clamp Meters">
                <span class="DDAccordionLink">Clamp Meters</span></a>
        </li>
        </span>
        </ul>
        </li>
    </ul>
    <div class="clear"></div>
    <div class="horizRule"></div>
    <a href="#"><img id="accordion-arrow" src="/images/buttons_and_icons/btn_dwn-150.png"></a>
    <div class="clear"></div>
</div>

我唯一的想法是当前的处理程序包含数据？我可以将其作为功能的一部分吗？

JS显然不是我的强项......我几乎不需要编写函数，更不用说谈论它们了。

Answer 1

首先，你的jQuery选择器不对。

('#DDAccordion > ul > li > a').click(function() {
    var checkElement = $(this).next()
    $('#DDAccordion li').removeClass('active');
    $(this).closest('li').addClass('active');
    if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
    }
});

应该是

$('#DDAccordion > ul > li > a').click(function() {
    var checkElement = $(this).next()
    $('#DDAccordion li').removeClass('active');
    $(this).closest('li').addClass('active');
    if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
    }
});

注意选择器前面的美元符号。

因此，您可以通过实现链接选择器并触发点击来触发click事件：

$('#DDAccordion > ul > li > img').click(function() {
$(this).closest('li').find('a').trigger('click');
//other code
});

所以基本上这个函数正在做什么来监听图像点击并在DOM结构中上升并找到最接近的 li 父级，而不是查找其中的链接并触发其上的click事件。

添加单击事件处理程序

1 个答案: