クリックでスライドを切り替える方法は？

Question

私は現在media queriesと(max-width: 480px)を使用してウェブサイトのレスポンシブルデザインを行っています。今、jQueryにslideToggleを左から右に作成する問題があります。基本的には、jQueryを使って要素にクラスを追加し、これをCSSでスタイリングしています。しかし、私はそれを作る他の方法があると推測するかもしれません... これは私のアプローチです。皆さんは私を助けてください、多分あなたはこれを解決するためのいくつかの他の勧告を持っています。

だから、ここに私のhtml次のとおりです。

 <div class="header"> 
    <div class="logo"><a href="/">Sport-concept.ru - интернет-магазин спортивных товаров</a></div> 
    <div class="contacts"> 
     <p class="phone">+7(499)394-46-03<br /> 
+7(985)427-48-55<br /> 
</p> 
     <a id="js-close" class="js-close"></a> 
     <p class="email"><a href="mailto:sport-concept@yandex.ru">sport-concept@yandex.ru</a></p> 
    </div> 
     <a id='js-phone' class='js-phone'></a> 
     <a id="js-cart" class="js-cart" href="/basket"></a> 
     <a id='js-mnu' class='js-mnu'></a> 
     <a id="js-cat" class="js-cat"></a> 
    <div class="mainmenu"> 
     <a id='js-cross' class='js-cross'></a> 
     <ul> 

       <li><a href="/" ><span></span></a></li> 
       <li><a href="/menu/16" ><span></span></a></li> 
       <li><a href="/menu/3" ><span></span></a></li> 
       <li><a href="/menu/5" ><span></span></a></li> 
       <li><a href="/articles" ><span></span></a></li> 
       <li><a href="/menu/21" ><span></span></a></li> 
       <li><a href="/menu/22" ><span></span></a></li>  </ul> 
    </div> 
    </div> 

これはCSS

#js-close {display:block;display:none;width:35px;height:35px;margin:17px 10px; position: absolute; 
right: 0;} 
.js-close{background:url(images/close-icon.png) center center no-repeat; opacity: 0.75; } 

であり、これはmedia

@media screen and (max-width: 480px) { 
p.phone._opened { 
     position: fixed; 
     top: 0; 
     background-color: #fff; 
     width: 100%; 
     height: 100%; 
     transform: translateX(-100%); 
     overflow-x: hidden; 
     overflow-y: auto; 
     -webkit-transition: all 0.3s ease-out; 
     display: block; 
    } 
} 

であると私のjQuery：

$(document).ready(function(){ 
    $("#js-phone").click(function(){ 
     $('p.phone').addClass("_opened"); 
    }); 
    $("js-close").click(function(){ 
     $('p_phone').removeClass("_opened");  
    }); 
}); 

Answer 1

最初の読み込みにはstyle='display:none'を使用してください。リンクをクリックしてdivを表示し、addClassを使用してクラスを追加します。

$("#js-phone").click(function() { 
 
$('.contacts').show(); 
 
    $('p.phone').addClass("_opened"); 
 
}); 
 
$(".js-close").click(function() { 
 
    $('.contacts').hide(); 
 
    $('p_phone').removeClass("_opened"); 
 
});

@media screen and (max-width: 480px) { 
 
    p.phone._opened { 
 
    position: fixed; 
 
    top: 0; 
 
    background-color: #fff; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform: translateX(-100%); 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    display: block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header" > 
 
    <div class="logo" ><a href="/">Sport-concept.ru - интернет-магазин спортивных товаров</a></div> 
 
    <div class="contacts" style='display:none'> 
 
    <p class="phone">+7(499)394-46-03<br /> +7(985)427-48-55 
 
     <br /> 
 
    </p> 
 
    <a id="js-close" class="js-close">Close</a> 
 
    <p class="email"><a href="mailto:sport-concept@yandex.ru">sport-concept@yandex.ru</a></p> 
 
    </div> 
 
    <a id='js-phone' class='js-phone'>Phone</a> 
 
    <a id="js-cart" class="js-cart" href="/basket">2</a> 
 
    <a id='js-mnu' class='js-mnu'>3</a> 
 
    <a id="js-cat" class="js-cat">4</a> 
 
    </div>

Answer 2

あなたはあなたのコードのいくつかの問題があります。あなたがtransform:translateX(-100%)とあなたのp.phoneを非表示にする必要があるCSSで

あなたが（代わりに p.phoneするその前に #を持っている js-closeニーズを、そして p_phoneニーズ）が正しくセレクタを書いていないJQで

2. openedの場合はtransform:translateX(0%)と表示されます。また、それはより多くのですので、私はJQを少し変更し、あなたがそれを閉じるときに、それは以下の移行

チェックスニペット（オープン=オープンボタン、閉じる=閉じるボタン）

を持つことになりますp.phoneにtransitionを追加セレクタキャッシング（変数）とイベントターゲティングを使用して、読みやすく、簡単に変更できます。あなたが気にならないといいですか？

P.S私はスニペットで動作するようにメディアクエリを削除しました。メディアクエリと

チェックフィドル>jsFiddle

var open = $("#js-phone"), 
 
    close = $("#js-close"), 
 
    phone = $('p.phone') 
 
$("body").on("click", function(e) { 
 
    var target = $(e.target) 
 
    if (target.is(open)) { 
 
    $(phone).addClass("opened") 
 
    } 
 
    if (target.is(close)) { 
 
    $(phone).removeClass("opened") 
 
    } 
 
})

p.phone { 
 
    transform: translateX(-120%); 
 
    position: fixed; 
 
    top: 0; 
 
    transition: 0.3s; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    width: 100%; 
 
    background-color: #fff; 
 
    display: block; 
 
} 
 

 
.contacts { 
 
    margin-top: 100px; 
 
} 
 

 
/*@media screen and (max-width: 480px) {*/ 
 
    p.phone.opened { 
 
    transform: translateX(0); 
 
    } 
 
/*}*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 
    <div class="logo"><a href="/">Sport-concept.ru - интернет-магазин спортивных товаров</a></div> 
 
    <div class="contacts"> 
 
    <p class="phone">+7(499)394-46-03 
 
     <br /> +7(985)427-48-55 
 
     <br /> 
 
    </p> 
 
    <a id="js-close" class="js-close">Close</a> 
 
    <p class="email"><a href="mailto:sport-concept@yandex.ru">sport-concept@yandex.ru</a></p> 
 
    </div> 
 
    <a id='js-phone' class='js-phone'>Open</a> 
 
    <a id="js-cart" class="js-cart" href="/basket"></a> 
 
    <a id='js-mnu' class='js-mnu'></a> 
 
    <a id="js-cat" class="js-cat"></a> 
 
    <div class="mainmenu"> 
 
    <a id='js-cross' class='js-cross'></a> 
 
    <ul> 
 

 
     <li><a href="/"><span></span></a></li> 
 
     <li><a href="/menu/16"><span></span></a></li> 
 
     <li><a href="/menu/3"><span></span></a></li> 
 
     <li><a href="/menu/5"><span></span></a></li> 
 
     <li><a href="/articles"><span></span></a></li> 
 
     <li><a href="/menu/21"><span></span></a></li> 
 
     <li><a href="/menu/22"><span></span></a></li> 
 
    </ul> 
 
    </div> 
 
</div>