-3

我有一个下拉价目表，细分为小块以便于查看，提供多种服务，一些服务细分为子类别，用户可以单击带有向下箭头的按钮，单击按钮的另一级子类别是slideToggle 显示。箭头按钮保留在底部，以便他们可以在准备好时隐藏子类别。

我希望将箭头从隐藏子类别时的向下更改为显示它们时的向上。我已经准备好了一个包含两个箭头状态的图像png，我只需要一个命令/一组命令，这些命令将在隐藏/显示子类别时在状态之间切换箭头。

箭头位于此 HTML 中，作为.arrowsdiv 的背景图像。

<div class="morebutton" id="firstarrow">

    <div class="arrows">

    </div>

</div>

这是CSS：

.morebutton{
width:220px;
height:8px;
border:outset 1px #ddd;
/*margin-bottom:5px;*/
margin-left:auto;
margin-right:auto;
margin-top:0px;
background:#ddd;
border-radius:25px;
cursor:pointer;
overflow:hidden;
}

.morebutton:hover{
background:#eee;
height:15px;        
}

.arrows{
width:20px;
height:15px;
margin:0px auto;
background:url(images/morearrows.png) no-repeat 0px 0px;
}

这是元素上的当前 jQuery：

$("#firstarrow").click(function(){
    $("#londonmore").slideToggle(100);
});
//this reveals the sub-categories in a table called #londonmore

这是我尝试过的（在上面的函数中）：

$(this).toggle( 
    function(){ 
        $(".arrows").css({"background-position":"0px"}); 
    },  
    function(){ 
        $(".arrows").css({"background-position":"10px"}); 
});

我尝试过处理背景位置变化的数量，但它所做的只是稍微移动箭头，它不会在第一次点击时移动它，也不会移动到我想要的位置，它也没有继续隐藏子类别。

子类别隐藏。 箭头朝下。

子类别显示。 箭头应该朝上。

4

2 回答 2

2

这个答案必须有点笼统，因为您还没有发布任何代码，但是您在.slideToggle()上有一个回调。用它来做.css()

您只需要检查您所处的状态，然后设置右箭头即可。

例如：

    $('#button1').slideToggle('slow',function() {
        if ( ... ) {
            $('#arrow1').css('background-position','?px ?px');
        } else {
            $('#arrow1').css('background-position','?px ?px');
        }
    });

您必须填写空白 - 或者您可以以另一种方式实现回调，但是如果您想在 slideToggle 触发时更改 css，无论您做什么，使用回调都是可行的方法。

于 2012-09-24T23:21:27.647 回答
1

我不会直接通过jQuery.css. 我只是切换一个 CSS 类。我不确定你的标记是什么样的，但为了一个例子，让我们这样做：

<div class="expandable">
  <a href="#" class="expandable-expander">
    <span class="arrows">This is our arrow element</span>
  </a>
  <div class="expandable-content">
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
      <p>This is the content to expand!</p>
  </div>
</div>

然后我们可以做这个css：

.arrows {
  /* this is the default state and as the default we want the arrow closed
     so the bg position 0 0 is for the closed state */
  width:20px;
  height:15px;
  margin:0px auto;
  display: inline-block;
  background: #f00 url(images/morearrows.png) no-repeat 0 0;
  text-indent: -999em;
}
.expandable {
  width:220px;
}
.expandable .expandable-expander {
   display: block;
   background: #ccc;
   width:220px;
   height:8px;
   border:outset 1px #ddd;
   margin-left:auto;
   margin-right:auto;
   margin-top:0px;
   background:#ddd;
   border-radius:25px;
   cursor:pointer;
   overflow:hidden;
}

.expandable .expandable-content {

   /* content is hidden at first unles .expandable is also .open */
    display: none;
}

.expandable.open .expandable-content {
   display: block;
}

.expandable .expandable-expander:hover {
   background:#eee;
   height:15px;
}

.expandable.open .expandable-expander .arrows {
   background-position: 0 -10px;
   /* only change the background position because everything else is set up */
    background-color: #0f0;
}

最后是我们基于 jQuery 的 js：

$(function(){
   $('.expandable .expandable-expander').click(function (e) {
       var $this = $(this),
           $container = $this.closest('.expandable'),
           $content = $container.find('.expandable-content');
       e.preventDefault();

       $content.slideToggle(100, function () {
           $container.toggleClass('open');
       });
   });
});

通过这样做并基于自包含结构配置事物，您只需在任何给定页面上运行此代码一次，只要您使用符合标准的类结构就可以了。您可以在许多地方重复使用它，而无需更改任何内容。

工作小提琴

请注意...除非您可以确保 DOM 的状态，否则您可能希望避免切换功能并使用长手版本。如果某些东西不同步，您可能会在打开其他东西的同时关闭其他东西。我不认为在这种情况下这将是一个问题。

于 2012-09-25T19:33:29.743 回答