Question

试图在bootstraps手风琴组件上为panel-title的margin-left属性设置动画。我尝试过使用.toggle（），但它只是做了一些奇怪的bug。我尝试过几种不同的方法，但似乎都没有。你可以在这里查看codepen

from flask import Flask
from flask.ext.mysqldb import MySQL

app = Flask(__name__)
app.config['MYSQL_HOST'] = '127.0.0.1'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = 'password'
app.config['MYSQL_DB'] = 'hello_db'
mysql = MySQL(app)

@app.route('/hello')
def index():
   cur = mysql.connection.cursor()
   cur.execute('''SELECT * FROM Users WHERE id=1''')
   rv = cur.fetchall()
   return str(rv)

if __name__ == '__main__':
   app.run(debug=True)

Answer 1

将您的CSS部分更改为：

.panel-title {
   margin-left: 0px;
   transition: all 1s;
}

.open-panel {
   margin-left: 30px;
}

同样是您的Method one：

//Method One
$('.panel-title').on('click', function() {
    var $this = $(this);
    $(".panel-title").not($this).removeClass('open-panel');
    $this.toggleClass('open-panel') 
});

这就是你想要的吗？

<强>更新我意识到你更新了你的笔，所以你需要注释掉其他一些JS，我提到的代码工作正常，here更新了笔

单击jquery上的animate bootstrap accordion panel-title

1 个答案: