UL LI щелчок скрывает UL

Я пытаюсь сделать список UL LI таким, чтобы при нажатии на слово «LIST» появлялись элементы LI и наоборот. Однако, если LI нажата на весь список, он снова будет скрыт. Я хотел бы сделать так, что если на LI будет нажата кнопка, это не скроет мой список, так как я бы хотел добавить функциональность для LI, который будет указан позже.UL LI щелчок скрывает UL

Вот код в вопросе:

<!DOCTYPE html> 

<html> 

<head> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<style type="text/css"> 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    cursor: pointer; 
} 
ul li { 
    display: none; 
} 
ul li:before{ content:"- ";} 
</style> 

<script type="text/javascript"> 

window.onload = function() { 

$('ul').click(function(){ 

    if ($('ul > li').css('display') == 'none') { 

     $('ul > li').show(); 

    } 
    else { 
    $('ul > li').hide() 

    } 

}); 

} 
</script> 

</head> 

<body> 

<ul> 
    List 
    <li>1234</li> 
    <li>5678</li> 
    <li>0123</li> 
</ul> 


</body> 

</html>

источник

2015-12-30 BobbyJones

Это недопустимый ХТ мл, единственное, что происходит непосредственно внутри '

' или '

' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' ''. Также '$ ('ul> li')' выбирает все элементы 'li' во всех элементах 'ul', поэтому вам нужно отредактировать свой селектор, чтобы выбрать только тот элемент, который вы хотите скрыть/показать. –

@PatrickEvans. Я думаю, вы имеете в виду единственное, что внутри 'ul' или' ol' - это 'li'. – Twisty

@Twisty, что я делаю, исправлено –

Как было отмечено выше, вы не можете просто вставить текст в ul подобное. A ul должен содержать только li элементов. Более чистый подход - это что-то вроде этого, которое показывает и скрывает элемент ul, а не все его внутренние элементы с элементом управления, внешним по отношению к ul.

Также, как указано ниже, существует намного лучший способ справиться со всем этим, чтобы убедиться, что вы не имеете дело со всеми ul на странице. С помощью селекторов классов и встроенных функций jquery.

Fiddle: https://jsfiddle.net/erjfghf0/

HTML:

<a class="showHideLink">List</a> 
<ul class="showHideList"> 
    <li>1234</li> 
    <li>5678</li> 
    <li>0123</li> 
</ul>

JS:

$('.showHideLink').click(
    function (event) { 
     $(this).next('.showHideList').toggle(); 
    } 
);

CSS:

ul { 
    display: none; 
}

источник

2015-12-30 19:59:00 AtheistP3ace

Это спрячет все элементы 'li' во всех элементах' ul', у вас код страдает от той же проблемы, что и OP, вы используете неправильный селектор. –

Вы правы. Я починил это. Это потому, что я скопировал и вставил код.= O – AtheistP3ace

Это все еще маловероятно, что хочет операционная система, так как теперь вы просто скрываете ** все ** ul, так как ul является братом для элемента привязки, вы будете делать '$ (this) .sibling (« ul ») .first() ', или дайте списку идентификатор и выберите его таким образом. –

Поскольку UL не имеет никакого отношения к визуализации, из-за всех LI скрывается, вам нужно отобразить действие события на что-то другое. Вот мое предложение: https://jsfiddle.net/Twisty/LL948r6f/

HTML

List (<a href="#" id='toggleLink'>Toggle</a>) 
<ul> 
    <li>1234</li> 
    <li>5678</li> 
    <li>0123</li> 
</ul>

CSS

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    cursor: pointer; 
} 

ul li { 
    display: none; 
} 

ul li:before { 
    content: "- "; 
}

JQuery

$(function() { 
    $('#toggleLink, ul').click(function() { 
     console.log("List Items display: " + $('ul li').css('display')); 
     if ($('ul li').css('display') == 'none') { 
      $('ul li').show(); 
     } else { 
      $('ul li').hide(); 
     } 
    }); 
});

источник

2015-12-30 20:09:20 Twisty

Вы также страдаете от синдрома копирования/пасты. =] – AtheistP3ace

@ AtheistP3ace Я вижу, о чем вы, ребята, обсуждаете, но, может быть, мне это не хватает. Когда я просматриваю HTML-код в FireBug, отображается 'ul', но' li' скрыты. Единственный другой вариант - добавить идентификаторы или классы к элементам, чтобы сделать их более доступными. – Twisty

Я думаю, что один из них, которые они использовали, будет выбирать каждую 'ul' на странице. И два вопроса, похоже, предполагают, что они хотят скрыть «ul», но вместо этого они скрывают каждый «ли». На данный момент я не уверен ни о чем. Но я думаю, мы все можем согласиться, что код по всему этому вопросу имеет много возможностей для улучшения. Я просто не пытался переписать его для них, но чтобы показать им путь и позволить им учиться самостоятельно с другими вопросами, но в моем ответе было так много комментариев, что я все равно закончил переписывать все это. такова жизнь. – AtheistP3ace

UL LI щелчок скрывает UL

ответ

Смежные вопросы