при событии щелчка по элементу списка без ответа или вывода на консоль - PullRequest
Новая
       9

при событии щелчка по элементу списка без ответа или вывода на консоль

0 голосов
/ 20 ноября 2018

Я пытаюсь сделать аккордеон с моим списком.

'use strict'

$(document).ready(function() {

  var drops = $('.accords');

  drops.on('click', function() {
    console.log(drops.length);
    for (i = 0; i < drops.length; i++) {
      $(this).toggleClass('acc');

      if ($(this).hasClass('acc')) {
        $(this).children('.accordion').css({
          'max-height': '500px'
        });
      } else {
        $(this).children('.accordion').css({
          'max-height': '0'
        });
      }
    }
  })
});
body {
  position: relative;
  padding-top: 148px;
}

.header {
  width: 100%;
  z-index: 5;
  top: 0;
  padding: 17px 0 13px;
  max-height: 124px;
  background-color: $black;
  display: flex;
  position: absolute;
  .container {
    width: 100%;
  }
  .logo {
    float: left;
  }
  .nav-mini {
    display: none;
  }
  .nav {
    float: right;
    padding-top: 45px;
    li {
      padding-bottom: 45px;
      display: inline;
      padding-right: 20px;
      &:last-child {
        padding-right: 0;
      }
    }
    a {
      font-size: 14px;
      &:hover {
        background-color: $white;
        color: $black;
      }
    }
  }
  @include breakpoint (tablet) {
    .nav-desktop {
      display: none;
    }
    .nav-mini {
      display: block;
    }
  }
}

.nav-mini {
  padding-top: 26px !important;
  .mini-menu {
    float: left;
    margin-right: 8px;
    padding: 9px 15.5px;
  }
  .mini-search {
    float: right;
    padding: 9px 14px;
  }
  .mini-menu,
  .mini-search {
    border: 2px solid $white;
  }
}

.dropdown-mini {
  position: absolute;
  height: 1500px;
  width: 100%;
  top: 124px;
  left: 0;
  background-color: $white;
}

.lvl-one {
  width: 100%;
  height: 100%;
  padding-top: 33px !important;
  a {
    font-size: 16px !important;
  }
  li {
    display: block !important;
    padding: 17.5px 0 !important;
    border-top: 3px solid $black;
    font-family: $f-bold;
    font-size: 16px;
    &:last-child {
      border-bottom: 3px solid $black;
    }
    span {
      float: right;
      padding-right: 6px;
    }
    .accordion {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
      .row {
        padding-top: 24px;
        .txt {
          font-size: 14px;
          word-spacing: 0em;
          line-height: 26px;
          margin-top: -6px;
          width: 99%;
          padding-bottom: 26px;
          .orange {
            float: none !important;
          }
        }
        h4 {
          letter-spacing: -0.09em !important;
          padding-bottom: 3px;
        }
        h5 {
          font-size: 13px !important;
          word-spacing: -0.2em !important;
        }
      }
      ul {
        li {
          border: none;
          padding: 7.5px 0 !important;
          font-size: 14px !important;
          &:first-child {
            padding-top: 0 !important;
          }
          &:hover {
            cursor: pointer;
          }
          a {
            font-size: 14px !important;
          }
        }
      }
    }
  }
}

.drop {
  height: 480px;
  width: 100%;
  top: 123px;
  background: transparent;
  position: absolute;
  z-index: 8;
  left: 0;
  .container {
    position: relative;
    width: 100%;
    height: 100%;
    .dropdown {
      display: none;
      height: 480px;
      width: 100%;
      z-index: 10;
      background-color: $white;
      top: 0;
      margin: 0 auto;
    }
  }
}

.drop-cont {
  padding: 56px 100px 0;
  display: flex;
  justify-content: center;
}

.drop-links {
  margin-right: 130px;
  width: 470px;
  li {
    padding: 15.5px 0;
    &:first-child {
      padding-top: 30px;
    }
    &:last-child {
      padding-bottom: 35px;
    }
  }
  a {
    font-size: 16px;
    font-weight: bold;
  }
}

.drop-txt {
  float: right;
  max-width: 370px;
  .txt {
    font-size: 15px;
    padding-top: 59px;
    padding-bottom: 24px;
    letter-spacing: -0.03em;
    line-height: 1.7;
    .orange {
      font-size: 19px;
    }
  }
  .sub {
    font-size: 14px;
    padding-bottom: 4px;
  }
  h5 {
    font-size: 13px;
    word-spacing: -0.2em;
  }
}

.drop-links,
.drop-txt {
  border-top: 3px solid $black;
  border-bottom: 3px solid $black;
}

.dropped {
  background-color: $white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <header class="header">
    <div class="dropdown-mini">
      <div class="container">
        <div class="nav lvl-one">
          <ul>
            <li class="accords"><a href="javascript:;" class="black ">ABOUT US</a><span>v</span>
              <div class="accordion">
                <div class="row">
                  <div class="col col-2-t">
                    <ul>
                      <li class="accord"><a href="javascript:;">INTRODUCTION<span></span></a></li>
                      <li class="accord"><a href="javascript:;">VISION & VALUES<span></span></a></li>
                      <li class="accord"><a href="javascript:;">OUR STRATEGY<span></span></a></li>
                      <li class="accord"><a href="javascript:;">BUSINESS MODEL<span></span></a></li>
                      <li class="accord"><a href="javascript:;">LEADERSHIP TEAM<span></span></a></li>
                      <li class="accord"><a href="javascript:;">GOVERNANCE<span></span></a></li>
                      <li class="accord"><a href="javascript:;">HISTORY<span></span></a></li>
                    </ul>
                  </div>
                  <div class="col col-2-t">
                    <p class="txt black">
                      <span class="orange">“</span>In blandit porta consequat. Phasellus orci diam, laoreet in tristique pellentesque, sodales ut diam. Maecenas et quam quis erat accumsan iaculis ac vitae dolor. Cras mattis tellus condimentum pharetra
                      fermentum. Nulla porta risus id odio varius. <span class="orange">“</span>
                    </p>
                    <h4 class="sub">TERRY THAM</h4>
                    <h5>Managing Director</h5>
                  </div>
                </div>
              </div>
            </li>
            <li><a href="javascript:;" class="black portfolio">OUR PORTFOLIO</a><span>v</span></li>
            <li><a href="javascript:;" class="black">INVESTORS</a><span>v</span></li>
            <li><a href="javascript:;" class="black">NEWS & MEDIA</a><span>v</span></li>
            <li><a href="javascript:;" class="black">CONTACT</a></li>
          </ul>
        </div>
      </div>
    </div>
  </header>
</body>

jsfiddle ссылка

Часть, которую я не могу сделать, - это функция .on(click),Когда я нажимаю на элемент списка О НАС , .accordion должен получить максимальную высоту (должна быть видна).Но, как вы видите, я попытался протестировать код после того, как произошло событие click.В консоли я ничего не получаю.Не уверен почему.Имеет ли значение, что кликабельный элемент должен быть <li>?

Не уверен, что я тут не так делаю.

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

Я не уверен, что понимаю ваш вопросно надеюсь, что это поможет 

$(document).ready(function(){
	$(document).on('click','href',function(){
  	if($(this).attr("href")==="#"){
    	return false;
    }
  });
	$(".about-span").click(function(){
  	$(".about-div").slideToggle();
  });

});
body {
  position: relative;
}
header{
  padding:10px;
  background-color:teal;
}
a{
  color:#fff;
}
ul{
  padding:0;
}
li{
  display:inline-block;
  padding:2px;
}
.about-div{
  position:absolute;
  display:none;
  padding:10px;
  background-color:teal;
  top:100%;
  left:0;
}
.about-li{
  display:block;
  padding:5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <header>
      <ul>
        <li>
          <span class="about-span"><a href="#">ABOUT US</a></span>
          <div class="about-div">
            <ul>
              <li class="about-li"><a href="#">INTRODUCTION</a></li>
              <li class="about-li"><a href="#">VISION & VALUES</a></li>
              <li class="about-li"><a href="#">OUR STRATEGY</a></li>
              <li class="about-li"><a href="#">BUSINESS MODEL</a></li>
              <li class="about-li"><a href="#">LEADERSHIP TEAM</a></li>
              <li class="about-li"><a href="#">GOVERNANCE</a></li>
              <li class="about-li"><a href="#">HISTORY</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#">OUR PORTFOLIO</a></li>
        <li><a href="#">INVESTORS</a></li>
        <li><a href="#">NEWS & MEDIA</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
  </header>

</body>
0 голосов
/ 20 ноября 2018

В JSFiddle вы не можете просто использовать JQuery по умолчанию.Вы должны выбрать библиотеку.Нажмите JavaScript + No-Library (pure JS) и выберите свою библиотеку, которая в вашем случае будет JQuery 3.3.1.

Тогда вы найдете вывод в консоли браузера.

Редактировать:
Кстати, вы получилидругая ошибка.i is not defined.Чтобы решить эту проблему, вам нужно просто набрать var i;, например, ниже строки var drops = ....

Вот скрипка с выбранным JQuery и устранением всех ошибок.
https://jsfiddle.net/y92j0thc/6/

...