Нажмите на div, чтобы развернуть его, и нажмите на него, чтобы закрыть его, используя javascript

82
10

Я не уверен, почему я не могу воспроизвести эту функцию на своем веб-сайте. Во-первых, что-то, ошеломляющее, заключается в том, что он работает на одной странице. Я могу буквально скопировать каждую часть кода с этой страницы, и когда я пытаюсь создать новую страницу в одном каталоге, я не могу реплицировать те же функции. Я смотрю кнопку "КОМИССИИ" в меню слева.


Вот код, который на странице работает правильно.


<li class="has-sub ">
<a href="javascript:;">
<i class="icon-table"></i>
<span class="title">Commissions</span>
<span class="arrow "></span>
</a>
<ul class="sub">
<li ><a href="freedomtextim/multi pay Life_ printable payout spreadsheet_published.xlsx">Life Grid</a></li>
<li ><a href="freedomtextim/annuities/annuity multi pay_ printable payout spreadsheet_published.xlsx">Annuity Commission</a></li>
<li ><a href="freedomtextim/FEG Promotional Guidelines 2014.docx">Promotional Guidelines</a></li>
</ul>
</li>

Когда вы проверяете элемент, это то, что вы видите: has sub and arrow are the divs that change


Когда вы нажимаете и проверяете элемент, это то, что изменяется после клика, оно изменяется от display none до display block: enter image description here


и, наконец, имена div меняются на sub open и arrow open enter image description here


Вот мой код:


<li class="has-sub ">
<a href="javascript:;">
<i class="icon-table"></i>
<span class="title">Commissions</span>
<span class="arrow "></span></a>
<ul class="sub" style="display: block; overflow: hidden: 40.234671256042006px; padding-top: 0px; margin-top: 3.498667065742783; padding-bottom: 0px; margin-bottom: 3.498667065742783px; ">
<li ><a href="freedomtextim/multi pay Life_ printable payout spreadsheet_published.xlsx">Life Grid</a></li>
<li ><a href="freedomtextim/annuities/annuity multi pay_ printable payout spreadsheet_published.xlsx">Annuity Commission</a></li>
<li ><a href="freedomtextim/FEG Promotional Guidelines 2014.docx">Promotional Guidelines</a></li></ul>

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


Единственный javascript на странице - несколько фрагментов:


function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=800,width=1200,left=0,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}

<!-- BEGIN RESPONSIVE MENU TOGGLER -->
<a class="btn btn-navbar collapsed" id="main_menu_trigger" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="arrow"></span>
</a>
<!-- END RESPONSIVE MENU TOGGLER -->


Любая помощь будет принята с благодарностью. Спасибо.

спросил(а) 2014-03-06T07:05:00+04:00 6 лет, 7 месяцев назад
1
Решение
108

Используя jQuery, попробуйте это:


<!-- HTML -->
<ul>
<li class="has-sub">
<a href="#" id="commbtn"><span class="title">commissions</span></a>
<ul class="sub" id="hideShowComm">
<li ><a href="#">Item 1</a></li>
<li ><a href="#">Item 2</a></li>
</ul>
</li>
</ul>

<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#commbtn').live('click', function(event) {
jQuery('#hideShowComm').toggle('show');
});
});
</script>

Демо-версия кода


Пока все ваши страницы имеют одинаковый идентификатор для элементов, которые вы хотите контролировать, должны работать.

ответил(а) 2014-03-07T02:12:00+04:00 6 лет, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема