пытается переключить контейнер одним щелчком мыши

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

CSS:

#bodywrap1{ 
border-radius: 5px; 
height: 00px ; 
width: 80% ; 
overflow: hidden; 
border-top: solid 2px rgba(0,0,0,0.3) ; 
border-bottom: solid 2px rgba(0,0,0,0.3) ;

Javascript:

HTML:

<h2 onclick = "expand()" id = "expandv">Expand</h2>

Вот сайт им работать, а страница конкретно.

источник

2014-01-13 Bryan Fajardo

Переключение работает на основе свойства дисплея, так что устанавливают display: none к bodywrap1

Когда первый щелчок происходит, поскольку дисплей не установлен, вместо отображения элемента toggle() скрывает его, чтобы установить его

#bodywrap1 { 
    border-radius: 5px; 
    height: 0; 
    width: 80%; 
    overflow: hidden; 
    border-top: solid 2px rgba(0, 0, 0, 0.3); 
    border-bottom: solid 2px rgba(0, 0, 0, 0.3); 
    /*new property*/ 
    display: none; 
}

источник

2014-01-13 02:17:09

Спасибо, просмотрев все ответы, я думаю, что ваш лучший из-за простоты и потому, что мне пришлось написать еще одну строку кода. Благодаря! –

Причина, по которой происходит два клика, заключается в том, что .toggle скрывает # bodywrap1, а затем при втором щелчке показывает # bodywrap1 и оживляет высоту.

Я исправил это с помощью .toggleClass вместо этого и изменил некоторые вещи вокруг с CSS

http://jsfiddle.net/PUCLM/1/

HTML

<h2 id="expandv">Expand</h2> 
<div id="bodywrap1"> 
</div>

CSS

#bodywrap1{ 
border-radius: 5px; 
height: 0px; 
width: 80%; 
overflow: hidden; 
border-top: solid 2px rgba(0,0,0,0.3) ; 
border-bottom: solid 2px rgba(0,0,0,0.3) ; 
    background: blue; 

} 

#bodywrap1.theclass { 
    height: 600px; 
}

JQuery UI (вы можете только анимация высоты с пользовательским интерфейсом jQuery, а не простой jQuery)

$('#expandv').click(function() { 
    $("#bodywrap1").toggleClass('theclass', 500); 
});

источник

2014-01-13 02:15:27 CRABOLO

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

Должен возвратиться после поручения и проверить остальное. –

@BryanFajardo Хорошо, дайте мне знать, какую анимацию вы ищете. Потому что он меняет высоту для меня в скрипте. – CRABOLO

Ваш HTML не правильно написано, удалить из < головы > теги h1 и h2.

<head> 
    <link rel="stylesheet" type="text/css" href="../css/c++.css"> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
</head> 

<h1>C++</h1> 
<h2 id = "expandv">Expand</h2> 
<h1>Variables</h1> 
<!-- ... -->

Измените свой Javascript для следующего:

$(function() { 
    function expand() { 
     $("#bodywrap1").toggle(function(){ 
      $("#bodywrap1").animate({height:600},200); 
     }); 
    } 

    // Click function for #expandv item 
    $("#expandv").on("click", function() { expand(); }); 

    // Initialize a hidden wrap 
    $("#bodywrap1").css("display", "none"); 
});

Работа jsfiddle: http://jsfiddle.net/TFZ4R/

источник

2014-01-13 02:16:52 rusben

Спасибо, что указали на ошибки html, и код отлично поработал для меня чуть сложнее для меня. –

пытается переключить контейнер одним щелчком мыши

ответ

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