Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Выпадающий список по клику (https://javascript.ru/forum/misc/59049-vypadayushhijj-spisok-po-kliku.html)

gorbuz9kin 24.10.2015 13:37
Выпадающий список по клику
 
Добрый день!

Делаю сайт, в котором есть несколько выпадающих списков в хедере:
1. список с выбором языка;
2. список с выбором валюты (денежной единицы отображения стоимости товара);
3. список с выбором телефона службы поддержки, в зависимости от региона/города/страны;

Все списки выпадают по клику. Вариантов верстки подобных списков в просторах интернета достаточно: от банального select (option) до создания обыкновенного ненумерованного списка ul>li и "прикручивания" к нему JS.

Вопрос в том как "правильно" делаются/верстаются подобные списки?

Decode 24.10.2015 13:42
Select

EmperioAf 24.10.2015 16:25
Цитата:
Сообщение от gorbuz9kin
Вопрос в том как "правильно" делаются/верстаются подобные списки?
если содержимое в вариантах выпадающего списка большое, то обычный <select> плоховат, ибо в нём нет встроенного переноса и его вроде бы нельзя никак добавить. Т.е. вот такое выглядит не очень:
<select name="" id="">
  <option value="pravo">Гражданское право — отрасль права, объединяющая правовые нормы, регулирующие имущественные, а также связанные и не связанные с ними личные неимущественные отношения, которые основаны на независимости оценки, имущественной самостоятельности и юридическом равенстве сторон, в целях создания наиболее благоприятных условий
  </option>
</select>


В остальных случаях выбирают select

gorbuz9kin 24.10.2015 18:53
ок. а как тогда варианту option прикрепить картинку/иконку, ссылку?

gorbuz9kin 25.10.2015 11:01
В общем, сделал через ul>li. подскажите как передать значение пункта li при клике на него в span class="title" ?
http://jsfiddle.net/gorbuz9kin/m7gxk5s4/

рони 25.10.2015 12:14
кастомизация селекта на js+ сворачивание по клику вне селекта
 
gorbuz9kin,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by gorbuz9kin</title>
  <style type='text/css'>
    .dropdown-menu ul {
  margin: 0;
  padding: 0;
  width: 135px;
  list-style: none;
  display: none;

}
.dropdown-menu ul li {
    background: #0085b6;
    height: 35px;
}
.dropdown-menu ul li:hover {
    background: #1d9fcb;
}
.dropdown-menu ul li a {
  display: block;
  width: 100%;
  padding: 5px 35px;
  text-decoration: none;
    font-size: 15px;
    color: #fff;
}
.dropdown-menu ul li:first-child a {
    background: url(img/flag_english_active.png) no-repeat 5px center;
}
.dropdown-menu ul li:nth-child(2) a {
    background: url(img/flag_russion.png) no-repeat 5px center;
}
.dropdown-menu ul li:last-child a {
    background: url(img/flag_ukraine.png) no-repeat 5px center;
}

.dropdown-menu .title {
    display: inline-block;
    width: 80px;
    height: 20px;
    padding: 5px 0  5px 35px;
    font-size: 15px;
    line-height: 20px;
    cursor: pointer;
    background: #eaecf0 url(img/flag_english.png) no-repeat 5px center;
}

.dropdown-menu .title::after {
  content: "";
  float: right;
  display: block;
  background: url(img/arrow_down.png) no-repeat 10px center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.dropdown-menu.open .title {
  background: #0085b6 url(img/flag_english_active.png) no-repeat 5px center;
  color: #fff;
  border-bottom: 4px solid #1d9fcb;
}

.dropdown-menu.open .title::after {
  background: url(img/arrow_up.png) no-repeat 10px center;
}

.dropdown-menu.open ul {
  display: block;
}
  </style>




<script>
window.onload=function(){
var menuElem = document.getElementById('dropdown-menu'),
    titleElem = menuElem.querySelector('.title');
    document.onclick = function(event) {
    var target = elem = event.target;
    while (target != this) {
          if (target == menuElem) {
          if(elem.tagName == 'A') titleElem.innerHTML = elem.textContent;
          menuElem.classList.toggle('open')
              return;
          }
          target = target.parentNode;
      }
    menuElem.classList.remove('open');
}
}
</script>

</head>
<body>
  <div id="dropdown-menu" class="dropdown-menu">
  <span class="title">English</span>
  <ul>
    <li><a href="#">English</a></li>
    <li><a href="#">Русский</a></li>
    <li><a href="#">Украинский</a></li>
 </ul>
</div>

</body>

</html>

gorbuz9kin 25.10.2015 20:24
Спасибо огромное!
А если у каждого пункта li есть своя фоновая (background-image) картинка (в данном случае это флаг), как сделать так чтобы эта картинка "подтягивалась" в title при выборе определенного <li>

рони 25.10.2015 20:30
gorbuz9kin,
добавить class или data в ссылку и добавить в строку 87 изменение класса или стиля

рони 25.10.2015 20:38
gorbuz9kin,
<li><a href="#"  data-img="img/flag_english_active.png">English</a></li>


if(elem.tagName == 'A') {
            titleElem.innerHTML = elem.textContent;
            var url = elem.dataset.img;
            titleElem.style.backgroundImage = 'url('+url+')'
          }

рони 25.10.2015 21:14
gorbuz9kin,
или просто взять стиль backgroundImage из самой ссылки
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by gorbuz9kin</title>
  <style type='text/css'>
    .dropdown-menu ul {
  margin: 0;
  padding: 0;
  width: 135px;
  list-style: none;
  display: none;

}
.dropdown-menu ul li {
    background: #0085b6;
    height: 35px;
}
.dropdown-menu ul li:hover {
    background: #1d9fcb;
}
.dropdown-menu ul li a {
  display: block;
  width: 100%;
  padding: 5px 35px;
  text-decoration: none;
    font-size: 15px;
    color: #fff;
}
.dropdown-menu ul li:first-child a {
    background: url(http://abali.ru/wp-content/uploads/2010/12/united-kingdom-flag-16x16.png) no-repeat 5px center;
}
.dropdown-menu ul li:nth-child(2) a {
    background: url(http://abali.ru/wp-content/uploads/2010/12/russia-flag-16x16.png) no-repeat 5px center;
}
.dropdown-menu ul li:last-child a {
    background: url(http://abali.ru/wp-content/uploads/2010/12/ukraine-flag-16x16.png) no-repeat 5px center;
}

.dropdown-menu .title {
    display: inline-block;
    width: 80px;
    height: 20px;
    padding: 5px 0  5px 35px;
    font-size: 15px;
    line-height: 20px;
    cursor: pointer;
    background: #eaecf0 url(http://abali.ru/wp-content/uploads/2010/12/united-kingdom-flag-16x16.png) no-repeat 5px center;
}

.dropdown-menu .title::after {
  content: "";
  float: right;
  display: block;
  background: url(img/arrow_down.png) no-repeat 10px center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.dropdown-menu.open .title {
  background: #0085b6 url(img/flag_english_active.png) no-repeat 5px center;
  color: #fff;
  border-bottom: 4px solid #1d9fcb;
}

.dropdown-menu.open .title::after {
  background: url(img/arrow_up.png) no-repeat 10px center;
}

.dropdown-menu.open ul {
  display: block;
}
  </style>




<script>
window.onload=function(){
var menuElem = document.getElementById('dropdown-menu'),
    titleElem = menuElem.querySelector('.title');
    document.onclick = function(event) {
    var target = elem = event.target;
    while (target != this) {
          if (target == menuElem) {
          if(elem.tagName == 'A') {
            titleElem.innerHTML = elem.textContent;
            titleElem.style.backgroundImage =  getComputedStyle(elem, null)['backgroundImage']
          }
          menuElem.classList.toggle('open')
              return;
          }
          target = target.parentNode;
      }
    menuElem.classList.remove('open');
}
}
</script>

</head>
<body>
  <div id="dropdown-menu" class="dropdown-menu">
  <span class="title">English</span>
  <ul>
    <li><a href="#">English</a></li>
    <li><a href="#">Русский</a></li>
    <li><a href="#">Украинский</a></li>
 </ul>
</div>

</body>

</html>

gorbuz9kin 25.10.2015 23:10
Спасибо за помощь.
Но тут возникли очередные траблы. Когда в хедере допустим один выпадающий список: все работает, но когда добавляешь второй - например с выбором валюты, то один из них перестает нормально "работать". к тому же при клике, допустим на title спика валют, title списка выбора языков съезжает на уровень последнего элемента другого списка.
Вот что получается http://jsfiddle.net/gorbuz9kin/m7gxk5s4/5/
Что я делаю не так?

рони 25.10.2015 23:23
gorbuz9kin,
плагин вам писать надо - чтоб работало с каждым списком индивидуально ... лучше через классы и addEventListener и цикл по всем, а не id и onclick для каждого, возьмите готовые решения ... их много.

gorbuz9kin 25.10.2015 23:53
Спасибо за совет. Так как пока в JS не силен - буду искать готовый плагин.

рони 26.10.2015 00:30
gorbuz9kin,
css настройте сами
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by gorbuz9kin</title>
 <style type='text/css'>
 .dropdown-menu{
   width: 100px;
    float: left;
 }

 .dropdown-menu ul {
  margin: 0;
  padding: 0;
  width: 135px;
  list-style: none;
  display: none;

}
.dropdown-menu ul li {
    background: #0085b6;
    height: 35px;
}
.dropdown-menu ul li:hover {
    background: #1d9fcb;
}
.dropdown-menu ul li a {
  display: block;
  width: 100%;
  padding: 5px 35px;
  text-decoration: none;
    font-size: 15px;
    color: #fff;
}
.dropdown-menu.lang ul li:first-child a {
    background: url(http://abali.ru/wp-content/uploads/2010/12/united-kingdom-flag-16x16.png) no-repeat 5px center;
}
.dropdown-menu.lang ul li:nth-child(2) a {
    background: url(http://abali.ru/wp-content/uploads/2010/12/russia-flag-16x16.png) no-repeat 5px center;
}
.dropdown-menu.lang ul li:last-child a {
    background: url(http://abali.ru/wp-content/uploads/2010/12/ukraine-flag-16x16.png) no-repeat 5px center;
}

.dropdown-menu .title {
    display: inline-block;
    width: 100%;
    height: 20px;
    padding: 5px 0  5px 35px;
    font-size: 15px;
    line-height: 20px;
    cursor: pointer;
    background: #eaecf0  no-repeat 5px center;
}
.dropdown-menu.lang .title{
    background-image: url(http://abali.ru/wp-content/uploads/2010/12/united-kingdom-flag-16x16.png)
}


.dropdown-menu .title::after {
  content: "";
  float: right;
  display: block;
  background: url(img/arrow_down.png) no-repeat 10px center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.dropdown-menu.open .title {
  background-color:#0085b6;
  color: #fff;
  border-bottom: 4px solid #1d9fcb;
}

.dropdown-menu.open .title::after {
  background: url(img/arrow_up.png) no-repeat 10px center;
}

.dropdown-menu.open ul {
  display: block;
}
  </style>



<script>
window.onload=function(){
	    document.addEventListener('click', function(event) {
        var open = document.querySelector('.dropdown-menu.open');
        var target = elem = event.target;
        while (target != this) {
	          if (target.classList && target.classList.contains('dropdown-menu')) {
              if(elem.tagName == 'A') {
                var titleElem = target.querySelector('.title');
	            titleElem.innerHTML = elem.textContent;
	            titleElem.style.backgroundImage =  getComputedStyle(elem, null)['backgroundImage']
	          }
              open && open != target && open.classList.remove('open');
	          target.classList.toggle('open')
	              return;
	          }
	          target = target.parentNode;
	      }
        open && open.classList.remove('open');
	})
	}
</script>

</head>
<body>
  <header>
   <div class="header-wrapper">
        <!--Dropdown List Language-->
        <div id="dropdown-menu-lang" class="dropdown-menu lang">
          <span class="title">English</span>
          <ul>
            <li><a href="#">English</a></li>
            <li><a href="#">Русский</a></li>
            <li><a href="#">Украинский</a></li>
         </ul>
        </div>
         </div>

        <!--Dropdown List Currency -->
        <div id="dropdown-menu-currency" class="dropdown-menu currency">
          <span class="title">UAH</span>
          <ul>
            <li><a href="#">USD</a></li>
            <li><a href="#">RUB</a></li>
            <li><a href="#">EUR</a></li>
            <li><a href="#">UAH</a></li>
          </ul>
        </div>


</header>

</body>

</html>

gorbuz9kin 27.10.2015 14:54
У меня данный код не работает.
http://jsfiddle.net/m7gxk5s4/8/

рони 27.10.2015 15:05
gorbuz9kin,
две ошибки 1 посмотреть параметры запуска скрипта слева на jsfiddle и не делать масло масляным оно становится прогорклым от этого и перенести тег из 18 строки в 23
http://jsfiddle.net/m7gxk5s4/9/

gorbuz9kin 28.10.2015 15:02
спасибо


Часовой пояс GMT +3, время: 10:16.