programing

WordPress에서 jQuery로 아코디언을 작성하려면 어떻게 해야 합니까?

sourcejob 2023. 3. 20. 23:11
반응형

WordPress에서 jQuery로 아코디언을 작성하려면 어떻게 해야 합니까?

저는 다른 아코디언과 조금 다른 아코디언을 만들려고 합니다.

내가 하려는 일:

  • 페이지 너비에 걸쳐 설명을 표시하는 제목을 가집니다.
  • 제목을 화면 전체에 3열로 분할하고 싶기 때문에 제목은 페이지 폭에 걸쳐 있지 않습니다.

기본적으로 다음과 같은 것을 찾고 있습니다.

클릭 항목 없음 첫 번째 항목을 클릭하면 두 번째 항목을 누른 경우

보시다시피 대부분의 경우와는 조금 다릅니다.제가 하고 있는 것과 비슷한 데모를 찾았습니다.여기서 보실 수 있습니다.

지금까지 한 일:

Cherry Framework를 사용하고 쇼트 코드를 사용하여 동작하고 있습니다만, 제목에서 설명을 확장하려고 하면 문제가 생깁니다.아코디언 쇼트 코드를 편집하여 설명을 전폭으로 할 수 있을지 어떨지 모르겠지만, 이상적이라고 생각합니다.

지금까지의 코드는 다음과 같습니다.

    [tabs direction="top" tab1="the first tab" tab2="the second tab" tab3="the third tab"]
[tab1]

[row]

[span4]

[accordion title="Title 1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]

[/span4]

[span4]

[accordion title="Title 2"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]

[span4]

[accordion title="Title 3"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]

[/row]

[row]

[span4]

[accordion title="Title 4"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]

[span4]

[accordion title="Title 5"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]

[span4]

[accordion title="Title 6"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]
[/row]

다음은 제가 가지고 있는 스크린샷입니다.아무 것도 클릭하지 않았다 첫 번째 아이템 클릭 다음 2개의 항목을 클릭.

말씀드렸듯이, 저는 지금 쇼트 코드를 사용하고 있습니다.설명 텍스트가 페이지 폭에 걸쳐 있지 않은 문제에 부딪히지 않도록 하기 위한 보다 쉬운 방법이 있을 것입니다.

아래에 예를 제시하겠습니다.코드를 확인해 주세요.

$(document).ready(function(){
    $('.main ul li').click(function(){
      $('.main ul li').removeClass('active');
      $(this).addClass('active');
      $('.main ul li').css('margin-bottom','1%');
      $('.innerBox').hide();
      var boxHeight=$(this).children('.innerBox').innerHeight();
      $(this).css('margin-bottom', boxHeight);
      $(this).children('.innerBox').slideDown();
      var widthUL = $('.main ul').width() - 10;
      var test = $(this);
      var leftUL = test.position().left;
      $('.innerBox').css({'width': widthUL,'margin-left':- leftUL});      
    });
  });
*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
.clrfix:after{
  content:'';
  clear:both;
  display:block;
}
.main{
  width:900px;
  margin:0 auto;
  border:1px solid #ccc;
  position: relative;
  overflow:hidden;
}
.main ul li{
  padding:.5%;
  width:31%;
  border:1px solid #ccc;
  list-style:none;
  margin:1%;
  display:inline-flex;
  position: relative;
  border-radius:5px;
}
.main ul li.active{
  background:#d7e3de;
  border:1px solid #333;
  border-bottom:none;
  padding:1%;
  border-radius:0;
}
.main ul li.active .innerBox{
  top:37px;
}
.main ul li .innerBox{
  background:#d7e3de;
  position:absolute;
  left:-1px;
  display:none;
  top:38px;
  z-index:1;
  border:1px solid #333;
  padding:10px;
  min-height:20px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="main">
    <ul class="clrfix">
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat caborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li><li>Title here
        <div class="innerBox">test</div>  
      </li>

      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li><li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>

      <li>Title here
        <div class="innerBox">test</div>  
      </li><li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>

    </ul>
  </div>

그리고 내가 널 도울 수 있길 바래

제목과 동일하게 100%가 아니라 제목과 같은 너비로 표현하면 어떨까요?워드프레스가 어떻게 작동하는지는 모르겠지만 간단한 html과 css에서는 이것이 작동될 수 있습니다.

이 방법으로 동작하지 않으면 css에 컬럼을 만들 수 있습니다.

예를 들어 파란색 실선이 1px인 두 개의 열이 만들어집니다.

  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count:2 ; /* Firefox */
  -webkit-column-width: 50%; /* Chrome, Safari, Opera */
  -moz-column-width: 50%; /* Firefox */
  -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
  -moz-column-rule-style: solid; /* Firefox */
  -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
  -moz-column-rule-width: 1px; /* Firefox */
  -webkit-column-rule-color: blue; /* Chrome, Safari, Opera */
  -moz-column-rule-color: blue; /* Firefox */

이것은 실제로는 css는 아니지만 Firefox, Chrome, Safari, opera IE에서는 동작하지 않지만, 제가 아는 한 같은 기능을 하는 것을 발견했습니다.

언급URL : https://stackoverflow.com/questions/34821399/how-can-i-create-an-accordion-with-jquery-in-wordpress

반응형

'programing' 카테고리의 다른 글

속성을 기준으로 개체 각도 필터링  (0) 2023.03.20
플러그인 가져오기를 로드하지 못했습니다. 'eslint-plugin-import'  (0) 2023.03.20
Observable/http/async 콜로부터의 응답을 angular로 반환하려면 어떻게 해야 합니까?  (0) 2023.03.20
joke.fn() 메서드와 joke.spyOn() 메서드의 차이점은 무엇입니까?  (0) 2023.03.20
JSON 스키마: "all of"과 "additionalProperties"  (0) 2023.03.20

'programing'의 다른글

  • 현재글WordPress에서 jQuery로 아코디언을 작성하려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바