Question

您好我正在使用jquery ui手风琴。我一直试图找出如何（除了通常的手风琴功能）如果我点击一个外部链接，它将作为一个锚标签，并滑动div显示内容？

<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.accordion.js"></script>

<script type="text/javascript">
    $(function() {
        $("#accordion").accordion({
            autoHeight: false,
            navigation: true
        });

    });
</script>

<a href="#1">slide 1</a>

<a href="#2">slide 2</a>

<a href="#3">slide 3</a>

<div id="accordion">
  <h3><a href="#" name="1">1</a></h3>
  <div>text here</div>

  <h3><a href="#" name="2">2</a></h3>
  <div>text here</div>

  <h3><a href="#" name="3">3</a></h3>
  <div>text here</div>       
</div>

Answer 1

<script type="text/javascript">
    $(function() {
        $("#accordion").accordion({
            autoHeight: false,
            navigation: true
        });
        $('a.link').unbind('click').bind('click',function (){
             var rel = $(this).attr('rel');
             $('#'+rel).trigger('click');
        });
    });
</script>

<a class="link" rel="a1" href="#1">slide 1</a>

<a class="link" rel="a2" href="#2">slide 2</a>

<a class="link" rel="a3" href="#3">slide 3</a>

<div id="accordion">
  <h3 id="a1"><a href="#" name="1">1</a></h3>
  <div>text here</div>

  <h3 id="a2"><a href="#" name="2">2</a></h3>
  <div>text here</div>

  <h3 id="a3"><a href="#" name="3">3</a></h3>
  <div>text here</div>       
</div>

我没有测试过这个，但理论上它应该可以工作:)

定制jquery手风琴ui

1 个答案: