•  11-12-2021
  •  | 
  •  

Domanda

Trying get opacity to toggle. Basically the list items are set at zero opacity, thereby retaining their height. When the list subcategory head is clicked, the empty list area drops down ot the depth of the list items and then opacity should toggle to reveal list elements. On clicking the subcategory list head again, the list items' opacity is faded back to zero and then the list area collapses. Need to keep the list items there for their, hence the opacity method rather than hide, hideToggle or similar functions where they are removed from the DOM. http://jsfiddle.net/hotdiggity/zn6cz/10/

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jQuery Toggle Opacity</title>
    <script type="text" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  </head>

  <body>
  <ul class="list">
      <li><a href="#">Subcategory</a></li>
      <li id="id-1" class="expandable"><a href="#">Subcategory - Click this one</a>
        <ul>
              <li>Sub menu item 1</li>
              <li>Sub menu item 2</li>
              <li>Sub menu item 3</li>
              <li>Sub menu item 4</li>
              <li>Sub menu item 5</li>
              <li>Sub menu item 6</li>
         </ul></li>
          <li><a href="#">Subcategory</a></li>
          <li><a href="#">Subcategory</a></li>
      </ul>
  </body>
  </html>

JQuery...

​$(document).ready(function(){
    $('.list li.expandable ul').hide();
    $('.list li.expandable ul li').css({ opacity: 0 });;
    $('.expandable').click(function(){
        $('#id-1.expandable ul').slideToggle('slow');
//      $(this).toggleClass('toggle-arrow');
        $(this).toggle(function() {
//            $('.list li.expandable ul li').stop();
            $('.list li.expandable ul li').fadeTo(2000,1);
            return false;
              },
        function() {
//            $('.list li.expandable ul li').stop();
            $('.list li.expandable ul li').fadeTo(2000,0).delay(500);
            return false;
         }); 
        return false;
    });
});

​Currently the opacity toggle is malfunctioning with flickering on and off.

È stato utile?

Soluzione

I updated your jsfiddle. Does it solve your problem? 

$(document).ready(function(){
$('.list li.expandable ul').hide();
$('.list li.expandable ul').css({ opacity: 0 });;
$('.expandable').click(function(){
    if ($(this).find("> UL").is(":visible")) {
        $(this).find("> UL").fadeTo(2000, 0, function() {
            $(this).slideToggle("slow");
        });
    } else {        
        $(this).find('> ul').slideToggle('slow', function() {
            $(this).fadeTo(2000, 1);
            //return false;
        });
    }
});
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top