Question

任何人都可以告诉我如何获得这样的css：http://jqueryui.com/demos/accordion/#mouseover以下代码：

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<title>jQuery Vertical Accordion Menu Plugin v 2.6</title>
<link href="css/dcaccordion.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.cookie.js'></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcjqaccordion.2.7.min.js'></script>
<script type="text/javascript">
$(document).ready(function($){


                        $('.accordion-6').dcAccordion({
                        eventType: 'hover',
                        autoClose: true,
                        saveState: true,
                        disableLink: true,
                        menuClose: false,
                        speed: 'medium',
                        showCount: true,

                        autoExpand: true,
                        cookie  : 'dcjq-accordion-1',
                        classExpand  : 'dcjq-current-parent',

                        menuClose: false    
                    });

});
</script>
<link href="css/skins/blue.css" rel="stylesheet" type="text/css" />
<link href="css/skins/graphite.css" rel="stylesheet" type="text/css" />
<link href="css/skins/grey.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="wrap">
    <div class="graphite demo-container">

            <ul class="accordion accordion-6">
                <li><a href="#">Home</a></li>
                <li><a href="#">Products</a>
                    <ul class="accordion"  id="accordion-6">
                        <li><a href="#">Mobile Phones &#038; Accessories</a> </li>
                        <li><a href="#">Desktop</a> </li>
                    </ul>
                </li>
            <li><a href="#">About Us</a>
                <ul class="accordion"  id="accordion-6">
                    <li><a href="#">About Page 1</a></li>
                    <li><a href="#">About Page 2</a></li>            
                </ul>
            </li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact us</a></li>
            </ul>

    </div>
</div>

</body>
</html>

我对这个CSS很新，所以请任何人都可以告诉我如何实现这个......？

我想让我的CSS像这个网站一样：

http://bag-saver.com/uk/shop/black-handbags/

任何人都可以..？

Answer 1

为什么不使用完整的准备好的包... http://dhtmlx.com/docs/products/dhtmlxAccordion/index.shtml ...只需下载...按照步骤操作即可。

这是一个简单的内联css开始...它使用google accordian API ......

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">        </script>

<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#accordion").accordion({ active: false,
    collapsible: true
});
});
</script>
</head>
<body>
 <div id="accordion">
<h3>
<a href="#" style="background-color: Blue; height: 25px; color: White; text-decoration: none;">
    Start Service</a></h3>
<div style="height: 40px;">
<span>Start or Stop Servcice </span>
<asp:Panel ID="Panel1" runat="server" BorderStyle="Solid" BorderWidth="1px">
    <p>
        some text
    </p>
</asp:Panel>
</div>
<h3>
<a href="#" style="background-color: Blue; height: 25px; color: White; text-decoration: none;">
    Customer Service</a></h3>
<div>
<b>Contact Us</b>
<asp:Panel ID="pnlSrvc" runat="server" BorderStyle="Solid" BorderWidth="1px">
    <p>some text<p>
</asp:Panel>
</div>
<h3>
<a href="#" style="background-color: Blue; height: 25px; color: White; text-decoration: none;">
   some text</a></h3>
<div style="height: 40px;">
<span>some text </span>
<asp:Panel ID="Panel2" runat="server" BorderStyle="Solid" BorderWidth="1px">
    <p>
        some text
    </p>
</asp:Panel>


</div>
 <h3>
some text
</h3>
</body>
</html>

设计jQuery UI手风琴

1 个答案: