Question

首先，我必须告诉你，我是编程JavaScript和Ajax的新手，经过多次研究，我仍然没有找到解决方案。

我的问题是我尝试一起运行两个脚本，一个正确地排除另一个脚本。

我的目标是创建一个下拉列表菜单，允许在div中加载外部内容。

一切正常，但单击链接后我的列表不会自动关闭。

>>> re.findall('\(.*?\)',s)
[u"(date='2/xc2/xb2',time='/case/test.png')", u'(eee)']

>>> re.findall('\((.*?)\)',s)
[u"date='2/xc2/xb2',time='/case/test.png'", u'eee']

jsfiddle

Answer 1

如果在.post-link点击事件中返回false，则表示您阻止事件冒泡到关闭下拉列表的其他事件侦听器。您应该只是阻止默认操作。

$(".post-link").click(function (e) {
    var post_link = $(this).attr("href");

    $("#single-post-container").html("Chargement du menu");
    $("#single-post-container").load(post_link);
    e.preventDefault();
});

function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents: function () {
        var obj = this;

        obj.dd.on('click', function (event) {
            $(this).toggleClass('active');
            return false;
        });

        obj.opts.on('click', function () {
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue: function () {
        return this.val;
    },
    getIndex: function () {
        return this.index;
    }
}

$(function () {

    var dd = new DropDown($('#dd'));

    $(document).click(function () {
        // all dropdowns
        $('.wrapper-dropdown').removeClass('active');
    });

});

$(document).ready(function () {

    $.ajaxSetup({
        cache: false
    });
    $(".post-link").click(function (e) {
        var post_link = $(this).attr("href");

        $("#single-post-container").html("Chargement du menu");
        $("#single-post-container").load(post_link);
        e.preventDefault();
    });

});

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
::selection {
    background: transparent;
}
::-moz-selection {
    background: transparent;
}
.wrapper-demo {
    margin: 60px 0 0 0;
    *zoom: 1;
    font-weight: 400;
}
.wrapper-demo:after {
    clear: both;
    content:"";
    display: table;
}
.wrapper-dropdown {
    /* Size and position */
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: 10px;
    /* Styles */
    background: #fff;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
    cursor: pointer;
    outline: none;
    /* Font settings */
    font-weight: bold;
    color: #8AA8BD;
}
.wrapper-dropdown:after {
    content:"";
    width: 0;
    height: 0;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #8aa8bd transparent;
}
ul.dropdown {
    z-index: 9999;
}
.wrapper-dropdown .dropdown {
    /* Size & position */
    position: absolute;
    top: 140%;
    left: 0;
    right: 0;
    /* Styles */
    background: white;
    border-radius: inherit;
    border: 1px solid rgba(0, 0, 0, 0.17);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    font-weight: normal;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    list-style: none;
    /* Hiding */
    opacity: 0;
    pointer-events: none;
}
.wrapper-dropdown .dropdown:after {
    content:"";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 15px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;
}
.wrapper-dropdown .dropdown:before {
    content:"";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.1) transparent;
}
.wrapper-dropdown .dropdown li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #8aa8bd;
    border-bottom: 1px solid #e6e8ea;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.wrapper-dropdown .dropdown li i {
    float: right;
    color: inherit;
}
.wrapper-dropdown .dropdown li:first-of-type a {
    border-radius: 7px 7px 0 0;
}
.wrapper-dropdown .dropdown li:last-of-type a {
    border: none;
    border-radius: 0 0 7px 7px;
}
/* Hover state */
 .wrapper-dropdown .dropdown li:hover a {
    background: #f3f8f8;
}
/* Active state */
 .wrapper-dropdown.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}
/* No CSS3 support */
 .no-opacity .wrapper-dropdown .dropdown, .no-pointerevents .wrapper-dropdown .dropdown {
    display: none;
    opacity: 1;
    /* If opacity support but no pointer-events support */
    pointer-events: auto;
    /* If pointer-events support but no pointer-events support */
}
.no-opacity .wrapper-dropdown.active .dropdown, .no-pointerevents .wrapper-dropdown.active .dropdown {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dd" class="wrapper-dropdown" tabindex="1"> <span>Options</span>
    <ul class="dropdown">
        <li><a class="post-link" rel="2" href="/option-1/">Option 1</a></li>
        <li><a class="post-link" rel="2" href="/option 2/">Option 2</a></li>
        <li><a class="post-link" rel="2" href="/option-3/">Option 3</a></li>
    </ul>
</div>

JavaScript和Ajax冲突

1 个答案: