スプリット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>