3

これが私の状況です：

そのため、別の div をクリックしてサイドバーを切り替えようとしています。ビューポートの右側に固定されている高さ 100% のサイドバーです。基本的に、幅 50 ピクセルのトグル div と幅 250 ピクセルのサイドバー div の両方に 300 ピクセルの div をラップしようとしており、負の margin-right ピクセル値を使用してサイドバー部分を非表示にしたいと考えています。.toggle:active セレクター (トグル div がクリックされたときに発生する) を使用して、margin-right ピクセル値を 0px に戻すことでサイドバー部分を表示したいと考えています。

これまでのコード:

<div class="wrapper">
  <a href="#">
    <div class="toggle">Toggle</div>
  </a>
  <div class="cart">Cart</div>
</div>

これまでの CSS:

.wrapper {
  position:fixed;
  width:300px;
  height:100%;
  background-color:orange;
  top:0;
  right:0;
  margin-right:-250px;
}
.toggle {
  position:relative;
  display:block;
  width:50px;
  height:100%;
  background-color:grey;
  float:left;
}
.toggle:active .wrapper {
  margin-right:0px;
}
.cart {
  position: relative;
  width:250px;
  height:100%;
  background-color:red;
  float:right;
}

これがjsfiddleです！

これが私の質問です：

.toggle:active が使用されているときに .wrapper をターゲットにして css 属性を変更するにはどうすればよいですか? また、サイドバーがいつ表示され、いつ表示されないかを指定するにはどうすればよいですか?

私はJavascriptが初めてですが、コールバック関数のためにこれを行う必要があるようです。CSS のみが可能な場合は、そのソリューションに傾倒します。後で CSS トランジションを使用して要素を左右にスライドさせるアニメーションを選択できるように、margin-right を使用したいことに注意してください。

4

5 に答える 5

4

CSS のみのソリューション

デモ: http://jsfiddle.net/Victornpb/yJYJC/30/

これを使用するだけです：

/* Closed */
.wrapper{
    margin-right:-250px; 
}

/* Opened */
.wrapper:hover{
    margin-right:0px;
}

Javascript ソリューション

デモ: http://jsfiddle.net/Victornpb/yJYJC/6/

JS:

var wrapper = document.getElementsByClassName('wrapper')[0];
var toggle = document.getElementsByClassName('toggle')[0];

window.onload=function(){

    toggle.onclick=function(){
        wrapper.classList.toggle('opened'); 
    }

}

CSS:

.wrapper{
    position:fixed;
    width:300px;
    height:100%;
    background-color:orange;
    top:0;
    right:0;
    margin-right:-250px;
}
.wrapper.opened{
    margin-right:0px;
}
于 2013-01-22T02:57:28.803 に答える
3

CSS のみのソリューション ( DEMO ):

<div class="wrapper">    
  <label for="toggle">
     Toggle
  </label>    
  <input id="toggle" type="checkbox" />
  <div class="cart">Cart</div>
</div>

(非表示のチェックボックスは、トグル状態を決定するために使用されます)

#toggle {    
  display:none; /* hide checkbox */
}

/* the label associated with the checkbox (trigger) */
label{
  display:block;
}

/* move the div adjacent to the input (.cart) inside the visible area */
/* when the input is checked */
#toggle:checked ~ .cart{
  right:0;
}

/* the div that's being toggled */
.cart {
  position: absolute;
  width: 250px;
  height: 100%;
  right: -250px;
}
于 2013-01-22T02:39:26.743 に答える
1

CSS のみ、動作の異なる 2 つのサイドバー

2 つの異なるCSS のみのアニメーション サイドバーがあります。

  1. @vitim.usから着想を得て、ホバーを使用して表示/非表示を切り替えます
  2. @niceassからインスピレーションを得て、非表示のチェックボックスを使用してクリックして表示/非表示を切り替えます

特徴：

  • 滑らかなアニメーション
  • サイドバーの縦書きテキスト (開くと回転)
  • サイドバーが表示されているときに本文のサイズを変更する
  • 本体とサイドバーのクリーンボックス
  • スクロール可能なサイドバーのコンテンツ (スクロールバーを表示)。

hover（@ vitim.usの回答から分岐）いくつかの改善

完全に確定していない場合は、何らかの方法があります

  • 書くOpen cart/Your cart縦書き
  • CSS で改行不可スペースを使用して、 Open/Yourとcartの間の改行を抑制します。
  • サイドバーが表示されている間に、メインコンテンツのサイズを動的に変更します。

body {
    font-family: sans;
    font-weight: normal;
    font-size: 10pt;
}
.main {
    width: calc( 100% - 3em );
    transition: width ease 1300ms;
}
.wrapper:hover ~ .main {
    width: calc( 100% - 17em );
}
h1 {
    font-weight: bold;
    font-size: 1.3 em;
}
h2 {
    font-weight: bold;
    font-size: 1.15 em;
}
.wrapper{
    position:fixed;
    width: 16em;
    height:100%;
    background-color:orange;
    top:0;
    right:0;
    margin-right:-14em;
    /* Makes opening smoothly */
    transition: margin-right ease 1300ms;
    -moz-transition: margin-right ease 1300ms;
    -webkit-transition: margin-right ease 1300ms;
    -o-transition: margin-right ease 1300ms;
}
.inner {
    position: relative;
    width: 100%;
    float: left;
    display: inline-block;
    transform: rotate(90deg)  translate(-3em,0em);
    transition: transform ease 1300ms;
}

/* opened */
.wrapper.opened,
.wrapper:hover{
    margin-right:0px;
}

.toggle {
  position:relative;
    display:block;
    width:2em;
    height:100%;
    background-color:#CCC;
    float:left;
    font-weight: bold;
    text-align: center;
    padding-top: 50%;
    transition: background-color ease 1300ms;
    transition: color ease 1300ms;
}

/* toggle style when wrapper is hovered */
.wrapper:hover .toggle{
    background-color: #555;
    color: white;
}
.wrapper:hover .toggle .inner{
    transform: rotate(270deg);
}
/* Warn: there is NBSP, not spaces, after Open/Your */
.wrapper:not(:hover) .toggle .inner:before{
    content:"Open";
}
.wrapper:hover .toggle .inner:before{
    content:"Your";
}

.cart {
    position: relative;
    width:13.5em;
    height:100%;
    background-color:rgba(255,255,255,.4);
    float:right;
    padding: .2em;
    overflow: scroll;
}
<div class="wrapper">
    <div class="toggle"><div class="inner">&nbsp;cart</div></div>
    <div class="cart">
        <h2>Cart</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       </p>
    </div>
</div>
<div class="main">
<h1>Little <i>no-js</i> css side-bar demo</h1>
<p>This little demo let you see how a side-bar could be done without being using javascript...</p>
 <h2>Lorem Ipsum</h2>   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
   </p>

</div>

toggle:checked（@niceassの回答から分岐）

同じ改善点ですが、非表示のチェックボックスを使用しているため、サイドバー (のテキスト) をクリックして開く必要があります。

(この回答はWhat does "for" attribute do in HTML tag? にリンクされていますか? )

body {
    font-family: sans;
    font-weight: normal;
    font-size: 10pt;
}
#toggle { display:none; }
.main {
    width: calc( 100% - 3em );
    transition: width ease 1300ms;
}
#toggle:checked ~ .main {
    width: calc( 100% - 17em );
}
h1 {
    font-weight: bold;
    font-size: 1.3 em;
}
h2 {
    font-weight: bold;
    font-size: 1.15 em;
}
.wrapper{
    position:fixed;
    width: 16em;
    height:100%;
    background-color:orange;
    top:0;
    right:0;
    margin-right:-14em;
    /* Makes opening smoothly */
    transition: margin-right ease 1300ms;
    -moz-transition: margin-right ease 1300ms;
    -webkit-transition: margin-right ease 1300ms;
    -o-transition: margin-right ease 1300ms;
}
#toggle:checked ~ .wrapper {
    margin-right: 0pt;
}
#but {
    position: relative;
    width: 100%;
    float: left;
    display: inline-block;
    transform: rotate(270deg)  translate(-3em,0em);
    transition: transform ease 1300ms;
}
/* opened */
#zone {
  position:relative;
    display:block;
    width:2em;
    height:100%;
    background-color:#CCC;
    float:left;
    font-weight: bold;
    text-align: center;
    padding-top: 50%;
    transition: background-color ease 1300ms;
    transition: color ease 1300ms;
}

/* toggle style when wrapper is hovered */
#toggle:checked ~ .wrapper #zone {
    background-color: #555;
    color: white;
}
#toggle:checked ~ .wrapper #zone #but {
    color: white;
    transform: rotate(90deg);
}
#toggle:not(checked) ~ .wrapper #zone #but:before {
    content:"Open ";    /* non break space &#160; */
}
#toggle:checked ~ .wrapper #zone #but:before{
    content:"☒ Your ";
}
#toggle:not(checked) ~ .wrapper #zone #but:after {
    content:" ☐";        /* figure space &#8199; */
}
#toggle:checked ~ .wrapper #zone #but:after {
    content:"";
}
.cart {
    position: relative;
    width:13.5em;
    height:100%;
    background-color:rgba(255,255,255,.4);
    float:right;
    padding: .2em;
    overflow: scroll;
}
<input id="toggle" type="checkbox" />  
<div class="wrapper">
    <div id="zone"><label for="toggle" id="but">chart</label></div>
    <div class="cart">
        <h2>Cart</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       </p>
    </div>
</div>
<div class="main">
<h1>Little <i>no-js</i> css side-bar demo</h1>
<p>This little demo let you see how a side-bar could be done without being using javascript...</p>
 <h2>Lorem Ipsum</h2>   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
   </p>

</div>

于 2015-05-18T19:20:22.837 に答える
1

:activeはリンク (つまり、タグ) に対してのみ機能するため、<a>で使用することはできません。リンクに貼っても思い通りにはいかないと思いますし、親を「対象」にする方法もありません。そのような周囲を持つこともかなり奇妙です、あなたはそれを必要としないはずです..toggle<div><a><div>

だから、はい、javascriptが必要です。しかし、実際には JavaScript でクラスをターゲットにすることはできません。次の 2 つの解決策があります。

  1. をラッパーに追加できる場合idは、サイドバーの状態を切り替える関数を JavaScript で作成できます。

    <div class="wrapper" id="myId">
    <a href="#">
        <div class="toggle"
             onclick="document.getElementById('myId').style.marginRight = (document.getElementById('myId').style.marginRight == '0') ? '-250px' : '0';">Toggle</div>
    </a>
    <div class="cart">Cart</div>
</div>

    注: パーツは が 0 かどうかを(document.getElementById('myId').style.marginRight == '0') ? '-250px' : '0'テストし、margin-right0 の場合は -250px に変更し、その逆も同様です。ここで行ったことは最善の方法ではないかもしれませんが、javascript をあまりよく理解していない場合でも、この方法で使用できるように、短いものに限定したかったのです。それをよく知るようになると、それを改善することができます。また、あなたが持っているonclickすべての.toggledivに配置する必要があります...イベントハンドラーを使用できますが、それが何を意味するのかわからないと確信しており、これを単にコピーして貼り付けるのは良い考えではないかもしれません. 物事を比較的理解しやすくするため、常に2番目のポイントを使用できます.

  2. 本当に必要な場合class(またはこれを何度も繰り返す必要がある場合)、これを (できれば に)追加して、javascript ライブラリである jQueryを使用する必要があります。<head>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>

    次に、これを追加できます（できればまだ頭に）：

    <script type="text/javascript">
    $(document).ready( function()
    {
        var cart_visible = false;

        $('.toggle').on('click', function()
        {
            if ( cart_visible )
                $('.wrapper').css('margin-right', '-250px');
            else
                $('.wrapper').css('margin-right', '0');

            cart_visible = !cart_visible;
        });
    });
</script>

    今回は、カートが表示されているかどうかを確認するために( trueorを値として取る) ブール値を使用し、 . これは前と同じことを行います。-250px と 0 の間でトグルするだけですが、作成するすべての .toggle に入れる必要はなく、クラスで動作します。ただし、jQueryを使用する必要があります（それは実際には問題ではないと思いますが）falsemargin-right

なぜ変更したいのかよくわかりませんmargin-rightが... 消したいだけの場合は を使用できdisplay: none;、本当に位置を変更したい場合はright(この場合) を使用できます。

于 2013-01-22T03:14:38.303 に答える
0

これにはjQueryを使用することをお勧めします。シンプルでエラーの可能性が低くなります。 

$('.toggle').click(function() {
    $('.cart').toggle();
});

http://api.jquery.com/toggle/

于 2013-01-22T02:06:49.950 に答える