click on divクリックjqueryのないポリマーjs

Question

私はポリマーを使用していますが、イベントなどのトラブルがあります。

コード：

// This is where things are a little unclear for me. So far, I have tried the following: 
 
expand: function() { 
 
    var divToStretch = this.$.stretchMe; 
 
    if (/*search bar is open*/) { 
 
    //remove "stretched" css from "stretch" div 
 
    } else { 
 
    //add "stretched" css to "stretch" div 
 
    } 
 
}

div.stretch { 
 
    border: 1px solid black; 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 25px; 
 
    transition: width 1s; 
 
} 
 

 
.stretched { 
 
    width: 500px; 
 
}

<div class="stretch" id="stretchMe"> 
 
    <iron-icon class="search" icon="search" on-click="expand"></iron-icon> 
 
</div>

Answer 1

私は純粋なCSSの代替を示唆するかもしれませんか？ tabIndex="0"を追加することで、検索バーにフォーカスを当てることができます。この方法でdiv.stretch:focusのスタイルを指定することができます。ユーザーが要素をクリックまたはフォーカスしたときにサイズを動的に変更したり、ユーザーが他の要素にフォーカスしたときに要素を再び小さくしたりすることができます。

これは本当にシンプルでエレガントで、多くのコードを必要とせず、必要なものを実行します。試してみる！また

div.stretch { 
 
    border: 1px solid black; 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 25px; 
 
    transition: width 1s; 
 
} 
 

 
div.stretch:focus { 
 
    width: 500px; 
 
}

<div class="stretch" id="stretchMe" tabIndex="0"> 
 
    <iron-icon class="search" icon="search" on-click="expand"></iron-icon> 
 
</div>

それはあなたが後にしているものだならば、あなたは単にセレクタを変更することで、それは:hoverに同じことを行うことができます。必要に応じて、両方を組み合わせることもできます。以下は:hoverの例です。

div.stretch { 
 
    border: 1px solid black; 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 25px; 
 
    transition: width 1s; 
 
} 
 

 
div.stretch:hover { 
 
    width: 500px; 
 
}

<div class="stretch" id="stretchMe"> 
 
    <iron-icon class="search" icon="search" on-click="expand"></iron-icon> 
 
</div>

Answer 2

私は私の現在のコードは次のようになります

と同様に、拡大する検索バーを作成したいですを使用できますこのため classListの方法は：

expand : function() { 
    this.$.stretchMe.classList.toggle('stretched'); 
} 

Answer 3

古典的な方法は、以下のようになります：

if (/*search bar is open*/) { 
    divToStretch.style.width = "auto"; 
} else { 
    divToStretch.style.width = "500px"; 
} 

しかし、私は非常に多くのhere