Zeige mehr Schaltfläche

Question

Ich möchte LIs anzeigen, die "versteckte" Klasse haben, wenn ich auf die Schaltfläche klicke. Anfänger

$(".show-more a").on("click", function() { 
 
    if(linkText === "SHOW MORE"){ 
 
     linkText = "Show less"; 
 
     $('.hidden').css('visible', 'visible'); 
 
     $('.hidden').css('display', 'block'); 
 
    } else { 
 
     linkText = "Show more"; 
 
     $('.hidden').css('visible', 'hidden'); 
 
     $('.hidden').css('display', 'none'); 
 
    }; 
 

 
    $this.text(linkText); 
 
});

.hidden { 
 
display: none; 
 
visibility: hidden; 
 
}

<ul> 
 
    <li>Lorem</li> 
 
    <li>Lorem</li> 
 
    <li class="hidden">Ipsum</li> 
 
</ul> 
 
<div class="show-more"> 
 
    <a href="#">Show more</a> 
 
</div>

Ich denke, dass mein Javascript absolut falsch ist, bin ich. Hilf mir Danke

Answer 1

Sie führen einen strengen Vergleich ===, so dass der Brief Fall ist wichtig.

if(linkText === "Show more"){

Wie wäre es, die Klasse zu entfernen, die diese Elemente versteckt?

$(".show-more a").on("click", function() { 
    if(linkText === "Show more"){ 
     linkText = "Show less"; 
     $('li.hidden').removeClass('hidden') 
    } else { 
     linkText = "Show more"; 
     $('li.hidden').addClass('hidden') 
    }; 

    $this.text(linkText); 
}); 

jsFiddle mit einigen zusätzlichen refactors: https://jsfiddle.net/rt0cs8jh/

Answer 2

Sie können eine hidden Klasse zu jedem Element zugeordnet werden, die standardmäßig ausblenden möchten. Dann entfernen Sie diese Klasse oder schieben Sie sie einfach auf Knopfdruck.

var active = false; 
 
$(".show-more a").on("click", function() { 
 
    $('li.hidden').slideToggle(); 
 
    $(this).text(active ? 'Show more' : 'Show less') 
 
    active = !active; 
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>Lorem</li> 
 
    <li>Lorem</li> 
 
    <li class='hidden'>Lorem</li> 
 
    <li class='hidden'>Lorem</li> 
 
    <li class='hidden'>Lorem</li> 
 
    <li class="hidden">Ipsum</li> 
 
</ul> 
 
<div class="show-more"> 
 
    <a href="#">Show more</a> 
 
</div>

Answer 3

hier ist, wie ich es

$(".show-more a").on("click", function() { 
    var currentText = $(this).text(); 
    if(currentText === "Show More"){ 
     $('.hidden').show(); 
     $(this).text("Show Less"); 
    } else { 
     $('.hidden').hide(); 
     $(this).text("Show More"); 
    }; 
}); 

Answer 4

schreiben würde Sie einfach nee Da Click-Handler, der alle ul li Elemente findet, die die versteckte Klasse auf sie haben, es dann entfernen. Der folgende Code sollte tun was du willst.

$('.show-more a').on('click', function(){ 
    $('ul li.hidden').removeClass('hidden'); 
}); 

Answer 5

einen Selektor wie :gt(2) wird Ihren Code wesentlich mehr erweiterbar machen. Dieser Selektor wählt alle Elemente mit Ausnahme der ersten 2 aus. Darüber hinaus ist die Überprüfung auf .is(":visible") eine etwas sicherere Möglichkeit zu sehen, wofür der Text festgelegt werden soll.

Zusätzlich mit der .toggle() ein wenig abrupt sein kann, wenn man ein .slideUp() und .slideDown() verwenden möchten, können Sie Ihren Code zu .slideToggle() ändern.

$("li:gt(2)").hide(); 
 

 
$(".show-more a").on("click", function() { 
 
    $("li:gt(2)").toggle(); 
 
    if ($("li:gt(2)").is(":visible")) { 
 
     $(this).html("Show less"); 
 
    } else { 
 
     $(this).html("Show more");  
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>Lorem</li> 
 
    <li>Lorem</li> 
 
    <li>Ipsum</li> 
 
    <li>Ipsum</li> 
 
    <li>Ipsum</li> 
 
    <li>Ipsum</li> 
 
    <li>Ipsum</li> 
 
    <li>Ipsum</li> 
 
</ul> 
 
<div class="show-more"> 
 
    <a href="#">Show more</a> 
 
</div>

Answer 6

Ich würde das Refactoring ein übergeordnetes Element hinzuzufügen, dann wechseln nur den Zustand dieses Zeug durch eine Elternklasse und ändern Sie die alle Anzeigeebene Sachen in der CSS.

var $parent = $('.parent'), 
 
    $links = $('.show-more a'); 
 

 
$links.on("click", function() { 
 
    $parent.toggleClass('more'); 
 
});

.parent .hidden, .more li { 
 
    display: none; 
 
} 
 
.more .hidden { 
 
    display: list-item; 
 
} 
 
a:after { 
 
    content: 'Less'; 
 
} 
 
.more a:after { 
 
    content: 'More'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <ul> 
 
    <li>Lorem</li> 
 
    <li>Lorem</li> 
 
    <li class="hidden">Ipsum</li> 
 
    </ul> 
 
    <div class="show-more"> 
 
    <a href="#">Show </a> 
 
    </div> 
 
</div>

Answer 7

Ihr erstes und größte Problem ist, dass Sie Ihre Funktion auf un vorhandenen Daten sind zu stützen, damit es nicht durchführen kann (Ihre Funktion nicht wissen, was ist oder was linktext ist linktext Wert.

Zweitens müssen Sie nicht die CSS-Eigenschaften der „hidden“ Klasse ändern, können Sie toggleClass es nur aus dem Element.

Dies wird den Trick:

$(".show-more a").on("click", function() { 
    $("ul li").toggleClass("hidden"); 
    if ($(this).text() == "Show more") { 
     $(this).text("Show less"); 
    } else { 
     $(this).text("Show more"); 
    } 
});