Why won't this jQuery work?

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

I have a couple embedded ul's.

I want to be able to click on a parent li and make the child ul show.
Then if I click the li again, I want the child ul to hide.

During this I want a plus sign to be prepended if the child ul is hidden, and a minus sign to show if the child ul is shown.

here's what I have so far, it's not even complete code and I know it wouldn't work but I'm not even sure what logic to use for this. And my logical "or" operator isn't doing anything.
JAVASCRIPT Code: [ Select ]
$(document).ready(function() {
                     
      $('ul > li').click(function() {
                           
         $('li').children('span').remove(":contains('-')" || ":contains('+')");
                           
         $(this).prepend("<span> + </span>");
         
         $(this).children('*').toggle();
     
      });
     
      $('ul').children('li').prepend("<span> - </span>");
     
      $('ul li ul li ul li').children('span').remove(":contains('-')");
 
});
 
  1. $(document).ready(function() {
  2.                      
  3.       $('ul > li').click(function() {
  4.                            
  5.          $('li').children('span').remove(":contains('-')" || ":contains('+')");
  6.                            
  7.          $(this).prepend("<span> + </span>");
  8.          
  9.          $(this).children('*').toggle();
  10.      
  11.       });
  12.      
  13.       $('ul').children('li').prepend("<span> - </span>");
  14.      
  15.       $('ul li ul li ul li').children('span').remove(":contains('-')");
  16.  
  17. });
  18.  
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

woah, that looks a little busy. Can you show me the html you're wanting to work with and maybe explain it from that point of view? Hard to tell what you're attempting with that code.


I may not get back to this until tomorrow. It's late here and I have to work in the AM - just stopped through after some gaming to check in.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

fairly straight forward, just a bunch of lists.

HTML Code: [ Select ]
<body>
<ul>
  <li>Item 1
    <ul>
      <li>Item 1
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </li>
      <li>Item 2
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </li>
      <li>Item3
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </li>
    </ul>
  </li>
    <li>Item 2
    <ul>
      <li>Item 1
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </li>
      <li>Item 2
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </li>
      <li>Item3
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </li>
    </ul>
  </li>
    <li>Item 3
    <ul>
      <li>Item 1
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </li>
      <li>Item 2
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </li>
      <li>Item3
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</body>
 
  1. <body>
  2. <ul>
  3.   <li>Item 1
  4.     <ul>
  5.       <li>Item 1
  6.         <ul>
  7.           <li>Item 1</li>
  8.           <li>Item 2</li>
  9.           <li>Item 3</li>
  10.         </ul>
  11.       </li>
  12.       <li>Item 2
  13.         <ul>
  14.           <li>Item 1</li>
  15.           <li>Item 2</li>
  16.           <li>Item 3</li>
  17.         </ul>
  18.       </li>
  19.       <li>Item3
  20.         <ul>
  21.           <li>Item 1</li>
  22.           <li>Item 2</li>
  23.           <li>Item 3</li>
  24.         </ul>
  25.       </li>
  26.     </ul>
  27.   </li>
  28.     <li>Item 2
  29.     <ul>
  30.       <li>Item 1
  31.         <ul>
  32.           <li>Item 1</li>
  33.           <li>Item 2</li>
  34.           <li>Item 3</li>
  35.         </ul>
  36.       </li>
  37.       <li>Item 2
  38.         <ul>
  39.           <li>Item 1</li>
  40.           <li>Item 2</li>
  41.           <li>Item 3</li>
  42.         </ul>
  43.       </li>
  44.       <li>Item3
  45.         <ul>
  46.           <li>Item 1</li>
  47.           <li>Item 2</li>
  48.           <li>Item 3</li>
  49.         </ul>
  50.       </li>
  51.     </ul>
  52.   </li>
  53.     <li>Item 3
  54.     <ul>
  55.       <li>Item 1
  56.         <ul>
  57.           <li>Item 1</li>
  58.           <li>Item 2</li>
  59.           <li>Item 3</li>
  60.         </ul>
  61.       </li>
  62.       <li>Item 2
  63.         <ul>
  64.           <li>Item 1</li>
  65.           <li>Item 2</li>
  66.           <li>Item 3</li>
  67.         </ul>
  68.       </li>
  69.       <li>Item3
  70.         <ul>
  71.           <li>Item 1</li>
  72.           <li>Item 2</li>
  73.           <li>Item 3</li>
  74.         </ul>
  75.       </li>
  76.     </ul>
  77.   </li>
  78. </ul>
  79. </body>
  80.  
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

I think I'm getting a little closer, but I'm not sure why this jQuery isn't doing anything for me.

JAVASCRIPT Code: [ Select ]
$(document).ready(function() {
                     
      $('.open').click(function() {
                           
         $(this).removeClass('open').addClass('closed');
     
      });
     
      $('.closed').click(function() {
                           
         $(this).removeClass('closed').addClass('open');
     
      });
 
});
 
  1. $(document).ready(function() {
  2.                      
  3.       $('.open').click(function() {
  4.                            
  5.          $(this).removeClass('open').addClass('closed');
  6.      
  7.       });
  8.      
  9.       $('.closed').click(function() {
  10.                            
  11.          $(this).removeClass('closed').addClass('open');
  12.      
  13.       });
  14.  
  15. });
  16.  


I have the same html, accept that I've got all of the li's that have a child ul attached to a class as open. I should be able to create a switch from open to closed. Here's my css:

CSS Code: [ Select ]
ul li {
   list-style-type: none;
}
 
.open:before {
   content: "-";
}
 
.closed:before {
   content: "+";
}
 
.open > li {
   display: block;
}
 
.closed > li {
   display: none;
}
 
  1. ul li {
  2.    list-style-type: none;
  3. }
  4.  
  5. .open:before {
  6.    content: "-";
  7. }
  8.  
  9. .closed:before {
  10.    content: "+";
  11. }
  12.  
  13. .open > li {
  14.    display: block;
  15. }
  16.  
  17. .closed > li {
  18.    display: none;
  19. }
  20.  

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 56 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.