분할 BUtton이 작동하지 않습니다.

Question

내 응용 프로그램에서이 예제를 사용하고 있습니다. https://codepen.io/kushalpandya/pen/IAhin/ 버튼이 화면에 완벽하게 나타납니다. 나는 div 섹션과 모든 CSS를 따라 배치한다. 이제 화살표 버튼을 클릭하면 옵션이 표시되지 않는 이유를 알 수 없습니다. 내 스플릿 버튼이 작동하지 않습니다.

$(function() { 
 
    var splitBtn = $('.x-split-button'); 
 

 
    $('button.x-button-drop').on('click', function() { 
 
    if (!splitBtn.hasClass('open')) 
 
     splitBtn.addClass('open'); 
 
    }); 
 

 
    $('.x-split-button').click(function(event) { 
 
    event.stopPropagation(); 
 
    }); 
 

 
    $('html').on('click', function() { 
 
    if (splitBtn.hasClass('open')) 
 
     splitBtn.removeClass('open'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="containerButton"> 
 
    <span class="x-split-button"> 
 
    <button class="x-button x-button-main">&#10070; Action</button> 
 
    <button class="x-button x-button-drop">&#9660;</button> 
 
     <ul class="x-button-drop-menu"> 
 
     <li> 
 
     <a href="#">Item - 1</a> 
 
     </li> 
 
     <li> 
 
     <a href="">Item - 2</a> 
 
     </li> 
 
     <li> 
 
     <a href="">Long Item - 3</a> 
 
     </li> 
 
     </ul> 
 
    </span> 
 
</div>

내가 제대로 <Script> 태그를 배치했다.

Answer 1

또한 css를 추가해야합니다. 이를 확인 :

$(function() { 
 
    var splitBtn = $('.x-split-button'); 
 

 
    $('button.x-button-drop').on('click', function() { 
 
    if (!splitBtn.hasClass('open')) 
 
     splitBtn.addClass('open'); 
 
    }); 
 

 
    $('.x-split-button').click(function(event) { 
 
    event.stopPropagation(); 
 
    }); 
 

 
    $('html').on('click', function() { 
 
    if (splitBtn.hasClass('open')) 
 
     splitBtn.removeClass('open'); 
 
    }); 
 
});

.container { 
 
    text-align: center; 
 
} 
 

 
.container > h2 { 
 
    text-align: center; 
 
} 
 

 
.x-split-button { 
 
    position: relative; 
 
    display: inline-block; 
 
    text-align: left; 
 
    margin-top: 20px; 
 
} 
 

 
.x-button { 
 
    position: relative; 
 
    margin: 0; 
 
    height: 30px; 
 
    float: left; 
 
    outline: none; 
 
    line-height: 27px; 
 
    background: #F2F2F2; 
 
    border: 1px solid #E0E0E0; 
 
    box-shadow: 1px 1px 2px #E0E0E0; 
 
} 
 

 
.x-button:hover { 
 
    cursor: pointer; 
 
    background: #E0E0E0; 
 
} 
 

 
.x-button:active { 
 
    background: #D3D3D3; 
 
} 
 

 
.x-button.x-button-drop { 
 
    border-left: 0; 
 
    height: 30px; 
 
} 
 

 
.open > .x-button-drop-menu { 
 
    display: block; 
 
} 
 

 
.x-button-drop-menu { 
 
    position: absolute; 
 
    top: 27px; 
 
    right: 0; 
 
    z-index: 1000; 
 
    display: none; 
 
    float: left; 
 
    min-width: 160px; 
 
    padding: 5px 0; 
 
    margin: 2px 0 0; 
 
    font-size: 14px; 
 
    list-style: none; 
 
    background-color: #F2F2F2; 
 
    background-clip: padding-box; 
 
    border: 1px solid #E0E0E0; 
 
    box-shadow: 1px 1px 2px #E0E0E0; 
 
} 
 

 
.x-button-drop-menu li a { 
 
    display: block; 
 
    padding: 3px 20px; 
 
    clear: both; 
 
    font-family: arial; 
 
    color: #444; 
 
    text-decoration: none; 
 
} 
 

 
.x-button-drop-menu li a:hover { 
 
    background: #D3D3D3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="containerButton"> 
 
    <span class="x-split-button"> 
 
    <button class="x-button x-button-main">&#10070; Action</button> 
 
    <button class="x-button x-button-drop">&#9660;</button> 
 
     <ul class="x-button-drop-menu"> 
 
     <li> 
 
     <a href="#">Item - 1</a> 
 
     </li> 
 
     <li> 
 
     <a href="">Item - 2</a> 
 
     </li> 
 
     <li> 
 
     <a href="">Long Item - 3</a> 
 
     </li> 
 
     </ul> 
 
    </span> 
 
</div>