Переключить отображение: нет стиля с JavaScript
Я хочу изменить стиль (вторая строка ниже), чтобы удалить часть display: none;
, когда пользователь нажимает ссылку "Показать все теги". Если пользователь снова нажимает ссылку "Показать все теги", мне нужен текст display: none;
, добавленный обратно в инструкцию "style...".
<a href="#" title="Show Tags">Show All Tags</a>
<ul class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">
Я искал здесь и Google для примера, который я могу применить к моей ситуации. Я нашел много примеров, используя 2 блока DIV для показа/скрытия. Мне действительно нужно сделать это так, изменив элемент стиля html. У кого-нибудь есть пример (или ссылка на пример), который выполняет этот тип переключения с текстом display: none
.
Ответы
Ответ 1
Введите ul
a id
,
<ul id='yourUlId' class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">
то do
var yourUl = document.getElementById("yourUlId");
yourUl.style.display = yourUl.style.display === 'none' ? '' : 'none';
IF, вы используете jQuery, это будет:
var $yourUl = $("#yourUlId");
$yourUl.css("display", $yourUl.css("display") === 'none' ? '' : 'none');
Наконец, вы специально сказали, что хотите манипулировать этим свойством css, а не просто показывать или скрывать базовый элемент. Тем не менее я упомянул, что с jQuery
$("#yourUlId").toggle();
будет чередоваться между отображением или скрытием этого элемента.
Ответ 2
Дайте UL ID и используйте функцию getElementById:
<html>
<body>
<script>
function toggledisplay(elementID)
{
(function(style) {
style.display = style.display === 'none' ? '' : 'none';
})(document.getElementById(elementID).style);
}
</script>
<a href="#" title="Show Tags" onClick="toggledisplay('changethis');">Show All Tags</a>
<ul class="subforums" id="changethis" style="overflow-x: visible; overflow-y: visible; ">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Ответ 3
Другие ответили на ваш вопрос отлично, но я просто подумал, что я выброшу другой путь. Всегда полезно отделить разметку HTML, стилизацию CSS и код JavaScript, если это возможно. Самый чистый способ скрыть что-то, имея в виду, использует класс. Это позволяет определить определение "скрыть" в CSS, где он принадлежит. Используя этот метод, вы можете позже решить, хотите ли вы ul
скрыть, прокручивая или угасая, используя CSS transition
, без изменения вашего HTML или кода. Это длиннее, но я считаю это лучшим общим решением.
Демо: http://jsfiddle.net/ThinkingStiff/RkQCF/
HTML:
<a id="showTags" href="#" title="Show Tags">Show All Tags</a>
<ul id="subforms" class="subforums hide"><li>one</li><li>two</li><li>three</li></ul>
CSS
#subforms {
overflow-x: visible;
overflow-y: visible;
}
.hide {
display: none;
}
Script:
document.getElementById( 'showTags' ).addEventListener( 'click', function () {
document.getElementById( 'subforms' ).toggleClass( 'hide' );
}, false );
Element.prototype.toggleClass = function ( className ) {
if( this.className.split( ' ' ).indexOf( className ) == -1 ) {
this.className = ( this.className + ' ' + className ).trim();
} else {
this.className = this.className.replace( new RegExp( '(\\s|^)' + className + '(\\s|$)' ), ' ' ).trim();
};
};
Ответ 4
Вы можете сделать это через прямой javascript и DOM, но я действительно рекомендую изучать JQuery. Вот функция, которую вы можете использовать для фактического переключения этого объекта.
http://api.jquery.com/toggle/
EDIT: добавление фактического кода:
Решение:
HTML-фрагмент:
<a href="#" id="showAll" title="Show Tags">Show All Tags</a>
<ul id="tags" class="subforums" style="display:none;overflow-x: visible; overflow-y: visible; ">
<li>Tag 1</li>
<li>Tag 2</li>
<li>Tag 3</li>
<li>Tag 4</li>
<li>Tag 5</li>
</ul>
Код Javascript с использованием JQuery из сети распространения контента Google: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
$(function() {
$('#showAll').click(function(){ //Adds click event listener
$('#tags').toggle('slow'); // Toggles visibility. Use the 'slow' parameter to add a nice effect.
});
});
Вы можете протестировать прямо по этой ссылке: http://jsfiddle.net/vssJr/5/
Дополнительные комментарии к JQuery:
Кто-то предположил, что использование JQuery для чего-то подобного неправильное, потому что это 50-килобайтная библиотека. У меня есть сильное мнение против этого.
JQuery широко используется из-за огромных преимуществ, которые он предлагает (как и многие другие фреймворки javascript). Кроме того, JQuery размещается сетями распространения контента (CDN), такими как Google CDN, которые гарантируют, что библиотека будет кэширована в клиентском браузере. Это будет иметь минимальное влияние на клиента.
Кроме того, с помощью JQuery вы можете использовать мощные селектор, добавить прослушиватель событий и использовать функции, которые по большей части гарантируют кросс-браузер.
Если вы новичок и хотите изучить Javascript, пожалуйста, не дисконтируйте рамки, такие как JQuery. Это сделает вашу жизнь намного проще.
Ответ 5
вы можете сделать это легко, используя jquery, используя свойство .css...
попробуйте следующее: http://api.jquery.com/css/