Переключить отображение: нет стиля с 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/