7

私は次のHTML構造を持っています

<div class="categories">
    <div class="category">1</div>
    <div class="category">2</div>
    <div class="category">3</div>
</div>

この構造をSELECT/OPTIONのように機能させたい（タグを変更できない）親DIVにTOGGLEを適用しようとしましたが、DIVコンテナを開閉するだけで、次のような機能は変更されません。 SELECT-OPTION。

編集： ドロップダウンのSELECT-OPTIONタイプのように視覚的に変更するだけで十分です。

助けていただければ幸いです。ありがとうございました。

4

5 に答える 5

6

あなたはこれを試すことができます：http：//jsfiddle.net/VRjfm/

$('.categories').prepend('<span>select options</span>');

$('.categories').click(function(){
  $('div',this).slideToggle();
  $('.categories span').html('select options');
});

$('.category').click(function(e){
  e.stopPropagation(); // <--this will stop the event bubbling to its parent.
  $('.category').slideToggle();
  $('.categories span').html($(this).text());
});
于 2013-01-05T07:49:56.157 に答える
5

次のJavaScriptコードを使用します。あなたの問題を解決します

JSビンhttp://jsbin.com/utoyej/43/edit

  //This is while page load showing first element
        jQuery('.category').addClass('inactive').hide();
        jQuery('.category:first').addClass('active').removeClass('inactive').show();

  //Showing all option
        jQuery('.categories').mouseover(function(){
          jQuery('.category').show();
        });

   //Showing selected option
        jQuery('.categories').mouseleave(function(){
          jQuery('.categories .inactive').hide();
        });

 //Onclick making the option active
        jQuery('.category').click(function(){
            jQuery('.category').addClass('inactive').removeClass('active');
          jQuery(this).addClass('active').removeClass('inactive');
          jQuery('.categories .inactive').hide();


        });
于 2013-01-05T08:01:47.370 に答える
3

私は次のことをしました：

HTMLパート：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="dd" class="select-wrapper">--- Select ---
<div class="categories">
 <div class="category">1</div>
 <div class="category">2</div>
 <div class="category">3</div>
</div>

CSSパート：

.select-wrapper {
    /* Size & position */
    position: relative;
    width: 200px;
    margin-top: 25px;
    margin-left: 25px;
    padding: 12px 15px;

    /* Styles */
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.select-wrapper:after { /* Little arrow */
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #4cbeff transparent;
}

.select-wrapper .categories {
    /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /* Styles */
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid rgba(0,0,0,0.2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Hiding */
    max-height: 0;
    overflow: hidden;
}


.select-wrapper .categories div {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 10px;
    transition: all 0.3s ease-out;
    border-bottom: 1px solid #e6e8ea;
}


/* Hover state */

.select-wrapper .categories div:hover {
    color: #57a9d9;
}

/* Active state */

.select-wrapper.active {
    border-radius: 5px 5px 0 0;
    background: #4cbeff;
    box-shadow: none;
    border-bottom: none;
    color: white;
}

.select-wrapper.active:after {
    border-color: #82d1ff transparent;
}

.select-wrapper.active .categories {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
}

.select-wrapper:focus {
    border-radius: 5px 5px 0 0;
    background: #4cbeff;
    box-shadow: none;
    border-bottom: none;
    color: white;
}

.select-wrapper:focus:after {
    border-color: #82d1ff transparent;
}

.select-wrapper:focus .categories {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
}

jQueryパート：

function DropDown(el) {
        this.dd = el;
        this.initEvents();
    }
    DropDown.prototype = {
        initEvents : function() {
            var obj = this;

            obj.dd.on('click', function(event){
                $(this).toggleClass('active');
                event.stopPropagation();
            }); 
        }
    }

    $(function() {

        var dd = new DropDown( $('#dd') );

        $(document).click(function() {
            // all dropdowns
            $('.select-wrapper').removeClass('active');
        });

    });

実際の動作を確認するには：http：//jsfiddle.net/john_rock/LhUsc/

これはあなたの問題を解決するのに役立つかもしれないと思います。

于 2013-01-05T10:07:37.820 に答える
1

内部（'.catefory'）divにクリックイベントを追加すると、そこに「選択された」値がキャプチャされます。

元：

var selectedValue = '';

$('.category').click(function () {
  selectedValue = $(this).text();
  $('.categories').hide(); /* if you want to hide the options panel */ 
});
于 2013-01-05T07:30:16.130 に答える
1

jsFiddleデモ

編集：新しい選択があった後にカスタムラベルを表示するようにjsFiddleを改訂しました。div

純粋なJavaScriptソリューションの場合、このjsFiddleは、優れたアニメーション効果と構成設定を備えたシンプルなプラグインを使用します。

HTML：

  <div class="categories" id="examplePanel1" style="position:absolute; width:150px; height:75px; top:20px; left:0px; background:#a6bbcd; text-align:center; overflow:hidden;">
    <div class="category" onclick="slideExample1('examplePanel1', 'exampleHeader1'); resetLabel1(); dark(); return false;">1 - Dark</div>
    <div class="category" onclick="slideExample1('examplePanel1', 'exampleHeader1'); resetLabel1(); light(); return false;">2 - Light</div>
    <div class="category" onclick="slideExample1('examplePanel1', 'exampleHeader1'); resetLabel1(); image(); return false;">3 - Image</div>
  </div>

JavaScript： 

// Div 1 choice: Show purple color via image.
function light() {
  document.getElementById('theBox').style.backgroundImage = "url(http://placehold.it/100x100/FFFF99&text=Light)";
}

// Div 2 choice: Show yellow color via image.    
function dark() {
  document.getElementById('theBox').style.backgroundImage = "url(http://placehold.it/100x100/333399&text=Dark)";
}

// Div 3 choice: Show image
function image() {
  document.getElementById('theBox').style.backgroundImage = "url(http://www.gravatar.com/avatar/66cc4497ef4e7a711a1f83e6a74cfea1?s=100&d=identicon&r=PG)";
}

オリジナルのチュートリアル
パネルのアニメーションとチュートリアル

jsFiddleが気に入った場合は、[パネルアニメーション]リンクをチェックして、構成だけでさまざまな種類のアニメーションを確認してください。

于 2013-01-05T08:58:49.143 に答える