Back To Programming / Scripting / Coding Forum

Why won't this jQuery work?

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post January 14th, 2010, 11:27 pm

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.  
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post January 14th, 2010, 11:27 pm

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post January 14th, 2010, 11:29 pm

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.
I'd love to change the world, but they won't give me the source code.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post January 15th, 2010, 12:02 am

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.  
Use your words like arrows to shoot toward your goal.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post January 15th, 2010, 10:09 am

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.  
Use your words like arrows to shoot toward your goal.

Page 1 of 1

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 285 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
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.