jQuery Toggle Text und Bild funktioniert nicht

Question

Ich erstelle ein Dropdown-Akkordeon-Menü mit jQuery. Ich habe schon an einigen Versionen gearbeitet und mein Skript kann gut funktionieren, bevor ich die Bildumschaltung hinzufüge.

Aber nachdem ich das Bild Toggle-Skript hinzugefügt habe, funktioniert der ganze Toggle nicht gut.

$(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>

Also, was ich will zu tun ist, dass: Ursprünglich wird der Inhalt ausgeblendet werden, mit einem Titel „Show“ mit Pfeil nach unten Symbol angezeigt wird. Wenn ich auf den Titel klicke, wird der versteckte Inhalt angezeigt und der Titel ändert sich in "Ausblenden" und mit Pfeil nach oben.

Ursprünglich kann ich den Toggle mit diesen Text erreichen, aber nachdem ich versucht habe, das Bild Toggle-Skript hinzuzufügen, funktioniert es nicht.

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

Jeder kann mit mir Ihre Lösung/Meinung hier teilen? Vielen Dank für Ihre Zeit beim Lesen meiner Frage!

Answer 1

Wenn Sie dies tun:

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

Sie das <i> Element entfernen, die Sie als Pfeil verwenden. Das resultierende Markup wird:

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

Seit <i> ist jetzt weg, es gibt nichts zu wechseln. Statt den Text in das gesamte Element der Einrichtung, ein untergeordnetes Element erstellen, den Text zu halten:

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

Dann können Sie das spezifische Element Ziel, den Text zu setzen:

$(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>

(Hinweis: In meinem Browser sieht das Styling auf dem "Pfeil nach oben" nicht ganz richtig aus. Wahrscheinlich braucht man ein paar Feinabstimmungen.)

Answer 2

$(this).closet("div") 

Sollte sein:

$(this).closest("div")