jQuery UI 手风琴 - 如何完全删除样式? [英] jQuery UI Accordion - How to remove style completly?

问题描述

我喜欢 jQuery 手风琴 (http://jqueryui.com/demos/accordion/) 的功能，但我不想要这种风格！！

我想去掉所有的样式、img、边框、颜色等...

我没有看到这个选项，这是他们应该添加的.还是我记错了?

解决方案

您可以制作自己的手风琴.在没有 UI 的情况下使用 jQuery 手风琴毫无意义.创建适合您的网站的您自己的手风琴很容易.你只需要修改你想要的构建方式......比方说:

<a href='javascript:;'>第一个链接</a><div class='content'>这里的一些内容</div><a href='javascript:;'>第二个链接</a><div class='content'>这里的一些内容</div>...

然后，你只需要制作类似的东西

//点击任意一个容器内$('#container a').click(function(e) {//关闭所有<div>但是 <div>就在点击  之后$(e.target).next('div').siblings('div').slideUp();//在<div>上切换打开/关闭在 <a> 之后，如果没有打开就打开它.$(e.target).next('div').slideToggle();});

您现在可以根据需要编辑您的类，因为 JavaScript 实际上不需要它们.请注意，类 'content' 可以包含您想要的任何内容，包括 、other 或因为 .siblings 和 .next 仅适用于相同的层次结构.

I love the functionality of the jQuery accordion (http://jqueryui.com/demos/accordion/) however I do not want the style !!

I'd like to get rid of all the styles, the img, the border, the color, etc...

I don't see an option for this, this is something they should add. Or I am mistaking?

解决方案

You can make your own accordion. Using the jQuery accordion without the UI is pointless. Creating your own accordion adapted to your site is kind of easy. You just need to fix the way you want to build it...let's say:

<div id='container'>
  <a href='javascript:;'>First link</a>
  <div class='content'>  SOME CONTENT HERE </div>
  <a href='javascript:;'>Second link</a>
  <div class='content'>  SOME CONTENT HERE </div>
  ...
</div>

Then, you just need to make something like

//On click any <a> within the container
$('#container a').click(function(e) {
        //Close all <div> but the <div> right after the clicked <a>
    $(e.target).next('div').siblings('div').slideUp();
        //Toggle open/close on the <div> after the <a>, opening it if not open.
        $(e.target).next('div').slideToggle();
});

You can now edit your class as you want since you actually don't need them for the JavaScript. Note that the with the class 'content' can contain whatever you want, including , other or since the .siblings and .next only apply to the same hierarchy.

这篇关于jQuery UI 手风琴 - 如何完全删除样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！