first, must tell new programming javascript, , ajax , after several research, still have not found solution.
my problem try run 2 scripts , 1 precludes other run correctly.
my goal make dropdown list menu allow load external content in div.
everything works fine except list not close automatically when link clicked.
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() { // dropdowns $('.wrapper-dropdown').removeclass('active'); }); }); $(document).ready(function(){ $.ajaxsetup({cache:false}); $(".post-link").click(function(){ var post_link = $(this).attr("href"); $("#single-post-container").html("chargement du menu"); $("#single-post-container").load(post_link); return false; }); });
when return false in .post-link click event, you're preventing event bubbling other event listener closes dropdown. should instead prevent default action.
$(".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 () { // 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 , 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: 0.5s ease-in; -moz-transition: 0.5s ease-in; -ms-transition: 0.5s ease-in; -o-transition: 0.5s ease-in; transition: 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 { 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: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .wrapper-dropdown .dropdown li { float: right; color: inherit; } .wrapper-dropdown .dropdown li:first-of-type { border-radius: 7px 7px 0 0; } .wrapper-dropdown .dropdown li:last-of-type { border: none; border-radius: 0 0 7px 7px; } /* hover state */ .wrapper-dropdown .dropdown li:hover { 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 no pointer-events support */ pointer-events: auto; /* if pointer-events support 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>
Comments
Post a Comment