jQuery切换文本和图像不起作用

Question

I am creating a dropdown accordion menu with jQuery. I have worked on a few versions before and my script can work well before I add the image toggle.

But after I have added the image toggle script, the whole toggle is not functioning well.

 $(function() { $('.showmore').click( function() { $(this).closest("div").next(".dropdown").toggle(); $(this).find('i').toggleClass('arrow-down arrow-up'); if ($(this).text() == "Show") { $(this).text("Hide"); } else { $(this).text("Show"); } $(this).closest("div").next(".dropdown").toggleClass('selected'); } ) }) 

 .title { background-color: #CCCCCC; } .sprite { background-image: url(https://image.ibb.co/bHTF8R/pinkarrow.png); background-repeat: no-repeat; display: block; } .arrow-down { width: 9px; height: 6px; background-position: -9px 0; } .arrow-up { width: 9px; height: 6px; background-position: 0 0; } .arrow-down, .arrow-up { display: inline-block; padding-left: 5px; } .dropdown { display: none; } .selected { border: 4px solid #CCCCCC; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="content"> <div class="title"> <span class="showmore">Show<i class="sprite arrow-down"></i></span> </div> <!--End of class Title--> <div class="dropdown"> XXXXXXXXXX Content XXXXXXXXXX </div> </div> 

So what I want to do is that: Originally the content will be hidden, with a title "Show" with arrow down icon is shown. If I click on the title, the hidden content will be shown and the title will change to "Hide" and with arrow up icon.

Originally I can achieve the toggle with those text, however, after I have tried to add the image toggle script, it is not working.

$(this).find('i').toggleClass('arrow-down arrow-up');

Anyone can share with me your solution/opinion here? Thank you so much for your time of reading my question!

Answer 1

$(this).closet("div")

应该：

$(this).closest("div")

Answer 2

When you do this:

$(this).text("any text");

You remove the <i> element that you're using as an arrow. The resulting markup becomes:

<span class="showmore">any text</span>

Since the <i> is now gone, there's nothing to toggle. Instead of setting the text in the entire element, create a child element to hold the text:

<span class="showmore">
    <span>Show</span>
    <i class="sprite arrow-down"></i>
</span>

Then you can target that specific element to set the text:

$(this).find("span").text("any text");

---

Demo:

 $(function() { $('.showmore').click( function() { $(this).closest("div").next(".dropdown").toggle(); $(this).find('i').toggleClass('arrow-down arrow-up'); if ($(this).find("span").text() == "Show") { $(this).find("span").text("Hide"); } else { $(this).find("span").text("Show"); } $(this).closest("div").next(".dropdown").toggleClass('selected'); } ) }) 

 .title { background-color: #CCCCCC; } .sprite { background-image: url(https://image.ibb.co/bHTF8R/pinkarrow.png); background-repeat: no-repeat; display: block; } .arrow-down { width: 9px; height: 6px; background-position: -9px 0; } .arrow-up { width: 9px; height: 6px; background-position: 0 0; } .arrow-down, .arrow-up { display: inline-block; padding-left: 5px; } .dropdown { display: none; } .selected { border: 4px solid #CCCCCC; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="content"> <div class="title"> <span class="showmore"> <span>Show</span> <i class="sprite arrow-down"></i> </span> </div> <!--End of class Title--> <div class="dropdown"> XXXXXXXXXX Content XXXXXXXXXX </div> </div> 

(Note: In my browser the styling on the "up arrow" doesn't look quite right. Probably needs some tweaking.)