Magento 的 jQuery 向下滑动页面答案

【问题标题】：jQuery slide down page for MagentoMagento 的 jQuery 向下滑动页面
【发布时间】：2015-06-19 02:29:49
【问题描述】：

我正在尝试为 Magento 网站制作 jQuery 向下滑动效果。这是我的网站http://tinyurl.com/o7f7yhn 当我按下“Cum functioneaza？”按钮我想有这样的效果： http://tinyurl.com/ojk2n42

我尝试将代码直接添加到 header.phtml 中，我也尝试像静态块一样添加它但没有成功。

谁能告诉我如何让它工作？

谢谢

我将此代码添加到 app/design/frontend/skin/template/page/html/header.phtml：

<html>
<head>
<meta charset="utf-8">
<style>
html,body{
    width:100%;
    padding:0;
    margin:0;
}
 
.dropdownwrap{
    height:auto;
    float:left;
    margin:0px 0px 20px 0px;
    background-color:#434343;
    display:none;
    padding:20px;
}
 
.container{
    width:100%;
    float:left;
}
 
.container h2{
    width:100%;
    float:left;
    padding:40px 0px;
    margin:0;
    text-align:center;
    font-family: 'Patrick Hand SC', cursive;
    font-size:36px;
    color:#434343;
}
 
.dropdownwrap h3{
    width:100%;
    float:left;
    padding:40px 0px;
    margin:0;
    text-align:center;
    font-family: 'Patrick Hand SC', cursive;
    font-size:36px;
    color:white;
}
 
.container p{
    font-family: 'Open Sans', sans-serif;
    font-size:10pt;
    color:#B7B7B7;
    text-align:center;
    padding-bottom:50px;
}
 
.dropdownwrap p{
    font-family: 'Open Sans', sans-serif;
    font-size:10pt;
    color:white;
    text-align:center;
    padding-bottom:50px;
}
 
.container a,
.container a:visited{
    padding:8px 14px;
    font-size:12pt;
    border:1px solid #CCCCCC;
    background-color:#DDDDDD;
    text-decoration:none;
    text-transform:uppercase;
    color:#424242;
    border-radius:3px;
}
 
.container a:hover{
    padding:8px 14px;
    font-size:12pt;
    border:1px solid #F2F2F2;
    background-color:white;
    color:#CCCCCC;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(e){
 
   $('#dropdown').on('click',function(){
 
      $('.dropdownwrap').slideToggle();
 
   });
 
})
</script>
</head>

<body>
<div class="dropdownwrap">This is my test</div>
<p><a id="dropdown" href="#" title="Click This Button">X</a></p>
</body>
</html>

它在顶部显示了一个小 X，但它不起作用。

【问题讨论】：

请告诉我们你到目前为止做了什么。
我删除了代码......这一切都被混淆了，按钮不起作用......这是一团糟......我不太了解 jQuery，我想给在这里尝试一下...抱歉，我无法向您展示更多内容

标签： jquery magento slide

【解决方案1】：

你必须写一些类似下面的代码

<script>
jQuery.noConflict();
jQuery('.banner-btn').click(function(){
      $( "#name_of_div_to_slide" ).slideDown( "slow");
</script>

希望对你有帮助

谢谢，哈利 P。

【讨论】：

【解决方案2】：

您不能将整个代码放在标题中。

添加脚本

<script>
$(document).ready(function(e) {
 $('#dropdown').on('click',function(){
$('.dropdownwrap').slideToggle();
});
});
</script>

添加内容

<div class="dropdownwrap"> your text which is by default hide goes here </div>

添加按钮后

<a id="dropdown" href="#" title="Click This Button">button name</a>

添加CSS

<style>.dropdownwrap{
height:auto;
float:left;
margin:0px 0px 20px 0px;
background-color:#434343;
display:none;
padding:20px;}</style>

根据需要更改css

【讨论】：