Fatal编程技术网
  • jquery/
  • 简单切换与CSS&；jQuery，显示状态的图标有问题！

简单切换与CSS&；jQuery，显示状态的图标有问题！

jquery

简单切换与CSS&；jQuery，显示状态的图标有问题！,jquery,Jquery,我正在尝试使用CSS和jQuery为项目创建一个简单的切换。 我的问题是当一个项目打开，而另一个项目被单击时。单击图标时，图标正在更改，以让用户看到可以展开或折叠（+-）。单击一个图标时，打开的图标将按我所希望的方式关闭，但关闭的图标不会变回+ 有人能解决这个问题吗 我的文件如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

我正在尝试使用CSS和jQuery为项目创建一个简单的切换。 我的问题是当一个项目打开，而另一个项目被单击时。单击图标时，图标正在更改，以让用户看到可以展开或折叠（+-）。单击一个图标时，打开的图标将按我所希望的方式关闭，但关闭的图标不会变回+

有人能解决这个问题吗

我的文件如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 
<title>Simple Toggle with CSS &amp; jQuery by Soh Tanaka</title> 
<style type="text/css"> 

.container {
 width:200px;
 min-height:490px;
 position:absolute;
 top: 120px;
 left:810px;
 background-color:#f4f3f3;
 padding:5px;
 }

h2.trigger {
 padding: 0 0 0 20px;
 margin: 0 0 5px 0;
 background: url(pics/PlusMinus.gif) no-repeat;
 height: 16px;
 line-height: 16px;
 width: 250px;
 font-size: 16px;
 font-weight: normal;
 float: left;
}
h2.trigger a {
 color: #000;
}

h2.active {
background-position: left bottom;
}



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

<script type="text/javascript"> 
$(document).ready(function(){
 //Hide (Collapse) the toggle containers on load
 $(".toggle_container").hide();
 //Slide up and down & toogle the Class on click

$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
$(this).siblings().next("div.toggle_container").toggleClass("active").slideUp("slow");


});return false;
})
</script>



</head> 

<body> 

<div class="container"> 
 <h2 class="trigger"><a href="#">Property</a></h2> 
 <div class="toggle_container"> 

   <a href="#" id="">1</a><br />
    <a href="#"id="">2</a>
    <br />
    <a href="#" id="">3</a>
    <br /> <br /> 
 </div> 

 <br /><br />
 <h2 class="trigger"><a href="#">Hotel</a></h2> 
 <div class="toggle_container"> 
   <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p> 
  </div> 

 <br /><br />
 <h2 class="trigger"><a href="#">Other</a></h2> 
 <div class="toggle_container"> 
   <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p> 
  </div> 


   </div>

</body> 
</html> 


简单切换与CSS&；由Soh Tanaka编写的jQuery
.集装箱{
宽度：200px；
最小高度：490px；
位置：绝对位置；
顶部：120px；
左：810px；
背景色：#F4F3；
填充物：5px；
}
h2.触发器{
填充：0 20px；
保证金：0.5px 0；
背景：url（pics/PlusMinus.gif）不重复；
高度：16px；
线高：16px；
宽度：250px；
字体大小：16px；
字体大小：正常；
浮动：左；
}
h2.a{
颜色：#000；
}
h2.活性{
背景位置：左下；
}
$（文档）.ready（函数（）{
//隐藏（折叠）加载时的切换容器
$（“.toggle_container”）.hide（）；
//向上和向下滑动，单击鼠标拖动该类
$（“h2.trigger”）。单击（函数（）{
$（this.toggleClass（“active”）.next（）.slideToggle（“slow”）；
$（this）.sides（）.next（“div.toggle_container”）.toggleClass（“active”）.slideUp（“slow”）；
})；返回false；
})










事实上，这是一种类似于卡米尔的行为，它是一种对女性和女性来说都是平等的行为。乌克索尔省，布朗迪特市盲肠尺侧隐窝区，位于普莱米托岛的前庭




事实上，这是一种类似于卡米尔的行为，它是一种对女性和女性来说都是平等的行为。乌克索尔省，布朗迪特市盲肠尺侧隐窝区，位于普莱米托岛的前庭
我希望你能帮忙

谢谢莎拉，你一定在寻找效果

非常简单=）

您肯定在寻找效果

在=）中非常简单。

有几种方法可以做到这一点，但使用现有的设置。。。稍微更改CSS：

h2.trigger {
 padding: 0 0 0 20px;
 margin: 0 0 5px 0;
 background-image: url(plus.png);
 background-repeat:no-repeat;
 height: 16px;
 line-height: 16px;
 width: 250px;
 font-size: 16px;
 font-weight: normal;
 float: left;
}
然后在脚本中：

$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow").css('background-image','url(minus.png)');
$(this).siblings().next("div.toggle_container").toggleClass("active").slideUp("slow").css('background-image','url(plus.png)');
});
分离图像可以让您更轻松地进行更改，使用直接
背景：
更改url的结果好坏参半。在脚本中，我们将css更改添加到新图像中

一些备选方案：

使用单个图像，并更改css背景位置（x或y取决于精灵工作表）

使用jQuery accordion，对于图标，使用jQuery ThemeRoller图标表和以下行：

$( ".selector" ).accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });

或者疯狂地使用-这可能正是您想要的，也可能不是您想要的。

有几种方法可以做到这一点，但使用您现有的设置。。。稍微更改CSS：

h2.trigger {
 padding: 0 0 0 20px;
 margin: 0 0 5px 0;
 background-image: url(plus.png);
 background-repeat:no-repeat;
 height: 16px;
 line-height: 16px;
 width: 250px;
 font-size: 16px;
 font-weight: normal;
 float: left;
}
然后在脚本中：

$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow").css('background-image','url(minus.png)');
$(this).siblings().next("div.toggle_container").toggleClass("active").slideUp("slow").css('background-image','url(plus.png)');
});
分离图像可以让您更轻松地进行更改，使用直接
背景：
更改url的结果好坏参半。在脚本中，我们将css更改添加到新图像中

一些备选方案：

使用单个图像，并更改css背景位置（x或y取决于精灵工作表）

使用jQuery accordion，对于图标，使用jQuery ThemeRoller图标表和以下行：

$( ".selector" ).accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });

或者疯狂地去做——这也许正是你想要的，也许不是。

谢谢你，它现在正在工作。像这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 
<title>Simple Toggle with CSS &amp; jQuery by Soh Tanaka</title> 
<style type="text/css"> 

.container {
    width:200px;
    min-height:490px;
    position:absolute;
    top: 120px;
    left:810px;
    background-color:#f4f3f3;
    padding:5px;
    }

h2.trigger {
    padding: 0 0 0 20px;
    margin: 0 0 5px 0;
    background: url(pics/PlusMinus.gif) no-repeat;
    height: 16px;
    line-height: 16px;
    width: 250px;
    font-size: 16px;
    font-weight: normal;
    float: left;
}
h2.trigger a {
    color: #000;
}

h2.active {
background-position: left bottom;
}



</style> 

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

<script type="text/javascript"> 
$(document).ready(function(){
    //Hide (Collapse) the toggle containers on load
    $(".toggle_container").hide();
 //Slide up and down & toogle the Class on click

$("h2.trigger").click(function(){

if ( $('h2.trigger').hasClass("active") ) {
            $('h2.trigger').removeClass("active");
        } else {
            $(this).addClass("active");
        }
        var $nextDiv = $(this).next();
        var $visibleSiblings = $nextDiv.siblings('div:visible');

        if ($visibleSiblings.length ) {
            $(this).addClass("active");
            $visibleSiblings.slideUp('fast', function() {
                $nextDiv.slideToggle('fast');
            });
        } else {
            $nextDiv.slideToggle('fast');
        }
});return false;
})

</script>


</head> 

<body> 

<div class="container"> 

    <h2 class="trigger"><a href="#">Property</a></h2> 
    <div class="toggle_container"> 

            <a href="#" id="">1</a><br />
    <a href="#"id="">2</a>
    <br />
    <a href="#" id="">3</a>
    <br />
    </div> 
    <br />
    <br />
    <h2 class="trigger"><a href="#">Hotel</a></h2> 
    <div class="toggle_container"> 
            <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p> 
        </div> 

    <br /><br />

    <h2 class="trigger"><a href="#">Other</a></h2> 
    <div class="toggle_container"> 
            <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p> 
        </div> 


   </div>

</body> 
</html>


简单切换与CSS&；由Soh Tanaka编写的jQuery
.集装箱{
宽度：200px；
最小高度：490px；
位置：绝对位置；
顶部：120px；
左：810px；
背景色：#F4F3；
填充物：5px；
}
h2.触发器{
填充：0 20px；
保证金：0.5px 0；
背景：url（pics/PlusMinus.gif）不重复；
高度：16px；
线高：16px；
宽度：250px；
字体大小：16px；
字体大小：正常；
浮动：左；
}
h2.a{
颜色：#000；
}
h2.活性{
背景位置：左下；
}
$（文档）.ready（函数（）{
//隐藏（折叠）加载时的切换容器
$（“.toggle_container”）.hide（）；
//向上和向下滑动，单击鼠标拖动该类
$（“h2.trigger”）。单击（函数（）{
if（$（'h2.trigger'）.hasClass（“活动”））{
$（'h2.trigger'）.removeClass（“活动”）；
}否则{
$（此）.addClass（“活动”）；
}
var$nextDiv=$（this.next（）；
变量$visiblesibbins=$nextDiv.sibbins（'div:visible'）；
如果（$visiblesibbins.length）{
$（此）.addClass（“活动”）；
$VisibleShibles.slideUp（'fast'，function（）{
$nextDiv.slideToggle（'fast'）；
});
}否则{
$nextDiv.slideToggle（'fast'）；
}
})；返回false；
})










事实上，这是一种类似于卡米尔的行为，它是一种对女性和女性来说都是平等的行为。乌克索尔省，布朗迪特市盲肠尺侧隐窝区，位于普莱米托岛的前庭




事实上，这是一种类似于卡米尔的行为，它是一种对女性和女性来说都是平等的行为。乌克索尔省，布朗迪特市盲肠尺侧隐窝区，位于普莱米托岛的前庭
谢谢您，它现在可以工作了。像这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 
<title>Simple Toggle with CSS &amp; jQuery by Soh Tanaka</title> 
<style type="text/css"> 

.container {
    width:200px;
    min-height:490px;
    position:absolute;
    top: 120px;
    left:810px;
    background-color:#f4f3f3;
    padding:5px;
    }

h2.trigger {
    padding: 0 0 0 20px;
    margin: 0 0 5px 0;
    background: url(pics/PlusMinus.gif) no-repeat;
    height: 16px;
    line-height: 16px;
    width: 250px;
    font-size: 16px;
    font-weight: normal;
    float: left;
}
h2.trigger a {
    color: #000;
}

h2.active {
background-position: left bottom;
}



</style> 

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

<script type="text/javascript"> 
$(document).ready(function(){
    //Hide (Collapse) the toggle containers on load
    $(".toggle_container").hide();
 //Slide up and down & toogle the Class on click

$("h2.trigger").click(function(){

if ( $('h2.trigger').hasClass("active") ) {
            $('h2.trigger').removeClass("active");
        } else {
            $(this).addClass("active");
        }
        var $nextDiv = $(this).next();
        var $visibleSiblings = $nextDiv.siblings('div:visible');

        if ($visibleSiblings.length ) {
            $(this).addClass("active");
            $visibleSiblings.slideUp('fast', function() {
                $nextDiv.slideToggle('fast');
            });
        } else {
            $nextDiv.slideToggle('fast');
        }
});return false;
})

</script>


</head> 

<body> 

<div class="container"> 

    <h2 class="trigger"><a href="#">Property</a></h2> 
    <div class="toggle_container"> 

            <a href="#" id="">1</a><br />
    <a href="#"id="">2</a>
    <br />
    <a href="#" id="">3</a>
    <br />
    </div> 
    <br />
    <br />
    <h2 class="trigger"><a href="#">Hotel</a></h2> 
    <div class="toggle_container"> 
            <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p> 
        </div> 

    <br /><br />

    <h2 class="trigger"><a href="#">Other</a></h2> 
    <div class="toggle_container"> 
            <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p> 
        </div> 


   </div>

</body> 
</html>


简单切换与CSS&；由Soh Tanaka编写的jQuery
.集装箱{
宽度：200px；
最小高度：490px；
位置：绝对位置；
顶部：120px；
左：810px；
背景色：#F4F3；
填充物：5px；
}
h2.触发器{
填充：0 20px；
保证金：0.5px 0；
背景：url（pics/PlusMinus.gif）不重复