Question

这段代码效果很好，除了一件事，我无法弄清楚为什么它搞乱了。对于顶部图像，或“#personalinsurance”，我必须单击它两次才能实现该功能。这仅是您第一次使用该功能。如果单击任何其他ID，“＃businessinsurance”或“#assetpreservation”，则该功能在第一次单击时起作用。当单击其中一个“insurtypes”图像时，此功能只会使div出现在div“#insurpic”中。所以我的问题是，我能做些什么才能让它在第一次点击时起作用？

另外，有什么我可以改变让div显示更多......恩典？它只是出现，如果它滑入或像这样的酷的东西会很棒！但实际上，我只需要帮助解决第一个问题，如果你帮我解决了这个问题，那么你就更酷了！

链接到使用代码的网站Website

下面是HTML和jQuery。

HTML

<div id="insurtypes"> <a href='#personalinsurnace'>
    <img src="img/personal_insurance.png" />
    </a>  <a href='#businessinsurance'>
    <img src="img/business_insurance.png" />
    </a>
 <a href='#assetpereservation'>
    <img src="img/asset_preservation.png" />
    </a>

</div>
<div id="insurpic">
    <div id="personalinsurnace"><b>Personal Insurance Services</b>
        <br />choose the service you are interested in!
        <ul>
            <li></li>
        </ul>
    </div>
    <div id="businessinsurance"><b>Business Insurance Services</b>
        <br />choose the service you are interested in!
        <ul>
            <li></li>
        </ul>
    </div>
    <div id="assetpereservation"><b>Asset Preservation Services</b>
        <br />choose the service you are interested in!
        <ul>
            <li></li>
        </ul>
    </div>
</div>

的jQuery

$('#insurtypes').each(function () {

    var $active, $content, $links = $(this).find('a');

    $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
    $active.addClass('active');
    $content = $($active.attr('href'));

    $links.not($active).each(function () {
        $($(this).attr('href')).hide();
    });

    $(this).on('click', 'a', function (e) {

        if ($(this).is('.active')) {
            $('.active').removeClass('active');
            $content.hide();
        } else {
            $('.active').removeClass('active');
            $content.hide();
            $active = $(this);
            $content = $($(this).attr('href'));

            $active.addClass('active');
            $content.show();

            e.preventDefault();
        }
    });
});

Answer 1

您必须在e.preventDefault()事件开始后立即添加click。

点击事件后立即添加：

$(this).on('click', 'a', function (e) {

完整代码：

$('#insurtypes').each(function () {

    var $active, $content, $links = $(this).find('a');

    $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
    $active.addClass('active');
    $content = $($active.attr('href'));

    $links.not($active).each(function () {
        $($(this).attr('href')).hide();
    });

    $(this).on('click', 'a', function (e) {
        e.preventDefault();
        if ($(this).is('.active')) {
            $('.active').removeClass('active');
            $content.hide();
        } else {
            $('.active').removeClass('active');
            $content.hide();
            $active = $(this);
            $content = $($(this).attr('href'));

            $active.addClass('active');
            $content.show();
        }
    });
});

并确保删除事件函数最后一行中的e.preventDefault();

必须单击图像两次以使功能正常工作

1 个答案: