如何将jquery点击ui标题限制为仅标题而非选项卡

大家好

问题

我有一个很容易解决的问题。我试图在代码中创建一个事件处理程序，该程序仅在单击选项卡界面上的ui标题时运行。我可以让它正常运行，但是，我无法将单击限制在标题上，单击选项卡也会调用单击事件（即使我已经在li元素上显式设置了：not（）过滤器）

Html代码

<div id="iframescroll">
    <ul>
        <li><a href="#page1">Page 1</a></li>
        <li><a href="#page2">Page 2</a></li>
    </ul>
    <div id='page1'>Hey, this is page 1</div>
    <div id='page2'>Howdie -welocme to page 2</div>
</div>

$(function () {
    // set up tabs
    var $tabs = $("#iframescroll").tabs();

    // method to expand/contract tabs window
    var isWide = false;
    $('.ui-widget-header:not(.ui-state-default)').on('click', function (e) {
        e.preventDefault();
        if (!isWide) {
            $('#iframescroll').css('max-width', 415);
            $(this).css('cursor', 'zoom-out');
        } else {
            $('#iframescroll').css('max-width', 1200);
            $(this).css('cursor', 'zoom-in');
        }
        isWide = !isWide;
        return false;
    });
});

jQuery代码

<div id="iframescroll">
    <ul>
        <li><a href="#page1">Page 1</a></li>
        <li><a href="#page2">Page 2</a></li>
    </ul>
    <div id='page1'>Hey, this is page 1</div>
    <div id='page2'>Howdie -welocme to page 2</div>
</div>

$(function () {
    // set up tabs
    var $tabs = $("#iframescroll").tabs();

    // method to expand/contract tabs window
    var isWide = false;
    $('.ui-widget-header:not(.ui-state-default)').on('click', function (e) {
        e.preventDefault();
        if (!isWide) {
            $('#iframescroll').css('max-width', 415);
            $(this).css('cursor', 'zoom-out');
        } else {
            $('#iframescroll').css('max-width', 1200);
            $(this).css('cursor', 'zoom-in');
        }
        isWide = !isWide;
        return false;
    });
});

我已经设置了一个JSFIDLE来演示这个问题，因为单纯通过代码来可视化我正在尝试的东西并不容易：

期待fwd的回应

[编辑]-我不喜欢上面的结构，所以如果需要结构上的改变才能使其正常工作，那就努力工作。

使用e.stopPropagation（）事件

使用e.stopPropagation（）事件

该函数将阻止click事件冒泡到父元素并触发header click函数。这里是修改的地方。只需将下面的函数添加到代码中

添加此函数还将使“：not（.ui state default）”不必要

该函数将阻止click事件冒泡到父元素并触发header click函数。这里是修改的地方。只需将下面的函数添加到代码中

---

添加此函数还将使“：not（.ui state default）”不必要。

add e.stopPropagation（）；唉，这并不能解决问题——这是一个很好的相关建议；唉，这并不能解决问题——虽然这是一个很好的相关建议，但我在有问题的核心代码以及简化的JSFIDLE（）中都尝试了这一点，但都没有用。如果可能的话，您是否可以使用一个指向JSFIDLE的链接进行更新。谢谢赞赏的用户3310208回答得很好：Diges，他/她当然回答了，尽管你在关注问题时起到了作用，所以你也选择了a+1：）对不起，我在讨论的核心代码和简化的JSFIDLE（）中都尝试了这一点，但都没有用。如果可能的话，您是否可以使用一个指向JSFIDLE的链接进行更新。谢谢赞赏的用户3310208回答得很好：染料，他/她当然回答了，尽管你帮助解决了这个问题，所以你也带了a+1：）不错，这是我一直在寻找的另一种观点。这也很好，你得到了你自己的第一个被接受的答案-欢迎来到SO，谢谢你的帮助！！愿接二连三的回答同样富有成果；）谢谢：）自从我第一次开始编程，并最终决定加入时，我就一直这么说。愿你未来的钟声响亮：）-有一个grt weekendone的观点，我想补充一下，这就是为什么：not（）过滤器在这种情况下不能像我希望的那样工作？？很好，这是我正在寻找的另一种观点。这也很好，你得到了你自己的第一个被接受的答案-欢迎来到SO，谢谢你的帮助！！愿接二连三的回答同样富有成果；）谢谢：）自从我第一次开始编程，并最终决定加入时，我就一直这么说。愿你未来的钟声响亮：）-有一个grt weekendone点，我想补充一下，这就是为什么：not（）过滤器在这种情况下不能像我希望的那样工作？？

e.stopPropagation();

$('.ui-widget-header li').on('click',function(e){
 e.stopPropagation();
});