Как создать динамическое падение?

Вот мой код HTML.Как создать динамическое падение?

<dl id="sample" class="dropdown"> 
<dt><a href="#"></a></dt> 
<dd> 
    <ul> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Jobs</a></li> 
     <li><a href="#">Community</a></li> 
     <li><a href="#">Events</a></li> 
     <li><a href="#">Advisory</a></li> 
     <li><a href="#">People</a></li> 
     <li><a href="#">Universities</a></li> 
     <li><a href="#">HR Intellegence</a></li> 
     <li><a href="#">Companies</a></li> 
     <li><a href="#">Inbox</a></li> 
     <li><a href="#">Notifications</a></li> 
    </ul> 
</dd>

И это JS

$(document).ready(function() { 
$(".dropdown img.flag").addClass("flagvisibility"); 

$(".dropdown dt a").click(function() { 
    $(".dropdown dd ul").toggle(); 
}); 

$(".dropdown dd ul li a").click(function() { 
    var text = $(this).html(); 
    $(".dropdown dt a span").html(text); 
    $(".dropdown dd ul").hide(); 
}); 

function getSelectedValue(id) { 
    return $("#" + id).find("dt a span.value").html(); 
} 

$(document).bind('click', function(e) { 
    var $clicked = $(e.target); 
    if (! $clicked.parents().hasClass("dropdown")) 
    $(".dropdown dd ul").hide(); 
    }); 

    $("#flagSwitcher").click(function() { 
    $(".dropdown img.flag").toggleClass("flagvisibility"); 
    }); 
});

Это код выпадающего списка, который заполняет по щелчку. Я хочу повторить его 100 раз на моей веб-странице, и я не хочу копировать код и изменять имя или идентификатор класса для каждой записи. Я помню, что для этого есть функция типа .this ', но я не знаю, как ее использовать. Также у меня есть динамические сообщения, содержащие этот список, поэтому его JS нельзя повторять в каждой новой записи.

Просьба предложить такие изменения в этом коде, которые позволят мне использовать класс .dropdown с каждой записью без повторения JS-кода, и он открывает только тот раскрывающийся список, который открывается, чтобы открыть.

источник

2015-06-07 Mian Kamran

ли Javascript _really_ необходимый или вы бы также принять CSS только решение? – Kovah

Да, конечно, но раскрытие должно открываться только при нажатии. –

О, ладно. Вы можете использовать эту небольшую библиотеку (http://dev7studios.com/dropit/) для этого. Очень базовые и кривые соответствуют вашим потребностям. Не так много кода, но обеспечивают почти ту же структуру и функцию open-on-click-only. – Kovah

Я сделал что-то для вас:

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    html { 
     font-family: sans-serif; 
    } 
    .dropdown { 
     display: inline-block; 
    } 
    .dropdown dd { 
     display: none; 
     box-shadow: 0px 0px 2px 0px #555; 
     width: 180px; 
     position: absolute; 
     margin-left: 1px; 
     margin-top: 1px; 
     background-color: #FFF; 
    } 
    .dropdown ul { 
     list-style: none; 
     padding-left: 0px; 
    } 
    dt a { 
     display: inline-block; 
     background-color: #1b8be0; 
     padding: 10px; 
     color: #FFF; 
     text-decoration: none; 
    } 
    .dropdown li a{ 
     text-decoration: none; 
     color: #333; 
    } 
    .dropdown li { 
     padding: 6px; 
     cursor: pointer; 
    } 
    .dropdown li:hover{ 
     background-color: #EEE; 
     padding: 6px; 
    } 
    </style> 
</head> 
<body> 
<dl id="sample" class="dropdown"> 
    <dt><a href="#">Menu</a></dt> 
    <dd> 
     <ul> 
      <li><a href="#">News</a></li> 
      <li><a href="#">Jobs</a></li> 
      <li><a href="#">Community</a></li> 
     </ul> 
    </dd> 
</dl> 
<dl id="sample-2" class="dropdown"> 
    <dt><a href="#">Menu 2</a></dt> 
    <dd> 
     <ul> 
      <li><a href="#">More News</a></li> 
      <li><a href="#">More Jobs</a></li> 
      <li><a href="#">More Community</a></li> 
     </ul> 
    </dd> 
</dl> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script> 
$(".dropdown dt a").click(function(e){ 
    $(this).parent().next().fadeToggle("fast"); 
}); 
$(".dropdown dt a").blur(function(e){ 
    if ($(e.target).not(".dropdown ul")){ 
     $(".dropdown dd").fadeOut(); 
    } 
}); 
</script> 
</body> 
</html>

источник

2015-06-07 11:18:25 uz4ir

Да, отлично. Спасибо. –

Мне было очень приятно получить помощь от брата кашмири .. –

брат У меня возникла проблема. У меня есть несколько сообщений, которые создаются при нажатии кнопки. и эти сообщения содержат этот список, который вы предоставили. Проблема в том, что, когда я создаю новую запись, ваше раскрывающееся меню не работает. i.e они не работают динамически –

Лучше для вас использовать интерфейсные рамки, такие как Twitter Bootstrap или Zurb Foundation.

источник

2015-06-07 08:43:35 uz4ir

Брат, я хочу, чтобы вы предоставили мне варианты в коде, который я предоставил. –

Как создать динамическое падение?

ответ

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