i have been trying create separate function can used call click element , show element directly without making create again , again calling function directly. got stuck when click on other second div first div not getting hidden. kindly me this. tried
jquery(document).ready(function(){ shownav(".clickelement",".dropelement"); shownav(".anotherelement",".anotherdropelement"); shownav(".thirdelement",".thirddropelement"); }); function shownav(clickelement,showelement) { jquery(showelement).removeclass("dropdownelement"); jquery(showelement).hide(); jquery(clickelement).each(function(){ jquery(this).click(function(e){ jquery(this).toggleclass("active"); jquery(showelement).toggle(); jquery(showelement).toggleclass("dropdownelement"); e.stoppropagation(); }); jquery(document).on("click",".dropdownelement",function(e){ e.stoppropagation(); }); jquery(document).click(function(e) { if(jquery(e.target).hasclass(clickelement)||jquery(e.target).hasclass(showelement)) { console.log(clickelement); } else { console.log(clickelement); jquery(clickelement).removeclass("active"); jquery(document).find(".dropdownelement").hide(); jquery(document).find(".dropdownelement").removeclass("dropdownelement"); } }); }); } <ul> <li> <div class="clickelement">click function</div> <div class="dropelement" style="display: none">lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.</div> </li> <li> <div class="anotherelement">click function</div> <div class="anotherdropelement" style="display: none">lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.</div> </li> <li> <div class="thirdelement">click function</div> <div class="thirddropelement" style="display: none">lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book. has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop publishing software aldus pagemaker including versions of lorem ipsum.</div> </li> </ul> ul li { display: inline-block; width: 30%; vertical-align: top; }
you not need these many functions, simple click event needed
as far html concerned have add class showdiv instead of 3 separate classes dropelement,anotherdropelement,thirddropelement
this hide divs if click outside target
$('.showdiv').hide(); $(function(){ $('ul li').click(function(){ var thisdiv = $(this).find('.showdiv'); thisdiv.show(); $('ul li').find('.showdiv').not(thisdiv).hide(); }); $(document).click(function(){ if(event.target.nodename == 'html'){ $('ul li').find('.showdiv').hide(); } }); }); check out fiddle link
Comments
Post a Comment