试图在我的tumblr页面上设置一个手风琴部分

时间:2017-10-21 23:54:03

标签: javascript jquery html css tumblr

在过去的9个小时里,我一直试图在我的tumblr页面上进行设置。我用谷歌搜索和谷歌搜索,尝试了20种不同的方法,我被卡住了。

我设置了一个JSfiddle,因此更容易看到我的目标(并且失败)。谁能告诉我我做错了什么?

https://jsfiddle.net/q50as7u0/4/

class Widget(QtGui.QWidget):
    def __init__(self, parent=None):
        QtGui.QWidget.__init__(self, parent)
        self.filterLe = QtGui.QLineEdit(self)
        self.mytreeview = QtGui.QTreeView(self)
        self.setLayout(QtGui.QVBoxLayout())
        self.layout().addWidget(self.filterLe)
        self.layout().addWidget(self.mytreeview)
        self.model = QtGui.QStandardItemModel(self.mytreeview)

        self.proxyModel = QtGui.QSortFilterProxyModel(self.mytreeview)
        self.proxyModel.setSourceModel(self.model)
        self.mytreeview.setSortingEnabled(True)

        # set model
        self.mytreeview.setModel(self.proxyModel)
        self.mytreeview.clicked.connect(self.update_model)
        self.filterLe.textChanged.connect(self.onTextChanged)
        self.initialise_model()

    @QtCore.pyqtSlot(str)
    def onTextChanged(self, text):
        self.proxyModel.setFilterRegExp(text)

    def initialise_model(self):
        for text in ["parent1", "parent2", "parent3"]:
            item = QtGui.QStandardItem(text)
            self.model.appendRow(item)

    def update_model(self, index):
        ix = self.proxyModel.mapToSource(index)
        parent = self.model.itemFromIndex(ix)
        for text in ["children1", "children2", "children3"]:
            children = QtGui.QStandardItem("{}_{}".format(parent.text(), text))
            parent.appendRow(children)
        self.mytreeview.expand(index)

2 个答案:

答案 0 :(得分:0)

您可以使用this guide on w3schools进行设置 工作fiddle



var acc = document.getElementsByClassName("accordion");
var i; 

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}
&#13;
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ccc; 
}

div.panel {
    display: none;
}
&#13;
<button class="accordion">About</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Requirements</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Rules</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
&#13;
&#13;
&#13;

然而,这并不完全有助于您的代码,所以希望有人可以帮助您解决问题。

答案 1 :(得分:0)

在你的JS小提琴中有很多问题。

  1. 无法找到课程open的CSS。

  2. 您的close_accordion_section()函数会从所有手风琴中删除类active,请尝试使用href - 属性并将其作为参数传递给此 功能

  3. 这里的某些东西应该是错的,就像你称之为的那样 只关闭所有手风琴的功能。

  4.  if (jQuery(e.target).is('.active')) {
          close_accordion_section();
        } else {
          close_accordion_section();
    
          // Add active class to section title
          jQuery(this).addClass('active');
          // Open up the hidden content panel
          jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
        }

    您的代码太随机无法提供帮助,请进行这些更改,然后再次询问。 谢谢!