jquery - Height to get this sub navigation to slide up on first click -

-

i have list items have sub navigation:

  <ul role="menu">     <li role="menuitem">       <a href="#" class="clearfix">top level</a>     </li>     <li class="slidedown open" role="menuitem">       <a href="#" class="clearfix">top level</a>       <span class="slidedown-toggle">show sub menu</span>       <!-- subnav -->       <ul class="list-reset nav-sub" role="menu">         <li role="menuitem">           <a href="#">second level</a>         </li>         <li role="menuitem">           <a href="#">second level</a>         </li>         <li role="menuitem">           <a href="#">second level</a>         </li>       </ul>     </li>   </ul>

i have script, calculates height of subnav <ul> when .slidedown-toggle clicked , changes 0 depending on parent <li> having class 'open' toggled.

$(document).ready( function(){     var $slidedowntoggle = $('.nav-sidebar .slidedown-toggle');    $slidedowntoggle.click(function () {      var $slidedown = $(this).parent('.slidedown'); // container item     var $subnav = $(this).siblings('.nav-sub'); // ul needs slide up/down      var totalheight = 0; // calculate height required (in px) show <li>'s     $subnav.find('li').each(function() {       totalheight += $(this).outerheight(true);     });      // toggle 'open' class on parent <li>     $slidedown.toggleclass('open');      // set appropriate height     if ($slidedown.hasclass('open')) {       $subnav.css({height: totalheight + 'px'});     } else {       $subnav.css({height: '0px'});     }    });  });

the problem have class 'open' has been added <li class="slidedown"> because when on 'subnav' page want menu expended show are. because set height: auto in css .slidedown.open, height isn't animated (i'm aware of whole slideup using max-height , don't want that) when first click slidedown-toggle of 'open' items.

easiest way see i'm on @ jsbin. click second 'show menu' , it's slides , down nicely. click first 1 , first click doesn't slide (because of height auto). how can fix that? maybe set height on click first , set 0?

http://jsbin.com/poxiy/2/edit

it nasty hack, works... on ready handler assign height opened subnav

$('.nav-sidebar .slidedown.open .nav-sub').height(function(){     return $(this).height(); })

demo: fiddle

another solution discussed in below posts


Comments

Post a Comment

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

-
my test list<person> mylist; @test public void testisvalidperson() { mylist = new arraylist<person>(); mylist.add(new person("tom")); when(persondao.get(person)).thenreturn(mylist); when((persondao.get(person)).isempty()).thenreturn(false);//------exception thrown boolean result = service.isvalid("tom"); assertfalse(result); } method tested: public boolean isvalid(string person){ persondao = new persondao(); person personobj = new person(person); return (persondao.get(person).isempty())?false : true; } exception thrown: org.mockito.exceptions.misusing.wrongtypeofreturnvalue: boolean cannot returned get() get() should return list *** if you're unsure why you're getting above error read on. due nature of syntax above problem might occur because: 1. exception *might* occur in wrongly written multi-threaded tests. please refer mockito faq on limitations of concurrency testing. 2. sp
Read more

php - Magento - Deleted Base url key -

-
i working on cleaning url: http://mydomain.com/shop/shop/deals i going through settings in configuration tab in admin panel on magento , change secure , unsecure base urls remove first base url "shop" web page read: http://mydomain.com/shop/deals so changed unsecure base urls mydomain.com/shop mydomain.com , secure 12.345.67.89/shop 12.345.67.89. wrong thing do. i cannot reload page or admin console. how access these files through ftp , change correctly there?? when make changes in admin panel changes made in database not in file. have make changes in database. 1.go database , select core_config_data table under table find web/unsecure/base_url , web/secure/base_url . make changes here. don't forget clear cache in var/cache folder
Read more

android - How to disable Button if EditText is empty ? -

-
i have edittext , button in application. when button clicked,the text entered in edittext added listview. i want disable button if edittext empty.how ? this code button click imagebutton imb=(imagebutton)findviewbyid(r.id.btn_send); imb.setonclicklistener(new onclicklistener() { @override public void onclick(view arg0) { edittext et = (edittext)findviewbyid(r.id.edittext1); string str = et.gettext().tostring(); web1.add(str); toast.maketext(shoutsingleprogram.this, "you entered...."+str, toast.length_short).show(); adapter1.notifydatasetchanged(); et.settext(""); } }); } how can ? edittext1.addtextchangedlistener(new textwatcher() { @override public void ontextchanged(charsequence s, int start, int before, in
Read more