Question

我已经从此链接http://jqueryui.com/accordion/完成了可折叠的内容面板，我需要的是什么？在section1内容面板中，只有两个按钮（是和否）。因此，当我单击是按钮时，两个按钮消失，一些内容应该被加载到section1内容面板中。怎么做这个任务？这是使用twitter bootstrap构建的。

Answer 1

创建两个按钮，以下代码用于一个按钮，但您可以解决剩下的按钮，并使用剩余按钮执行您想要的操作。

$('.yesbutton').click(function({
    $(this).hide();
    $('.nobutton').hide();
    $('.supersneakyhidingcontent').show();
});

Answer 2

在按钮点击事件中，您可以按照BeatAlex的说明进行操作，同时从模板和/或数据源动态加载内容：

$('.button').click(function({
    // hide buttons

    // load content
    $.ajax({
         url: '/controller/action',    // path to controller or datasource
         type: 'POST',
         data: JSON.stringify(data),   // data to pass to server (format as needed)
         contentType: 'application/json;charset=utf-8'
    }).done(function (data) {          // data is what your return from server
        // execute code here to fill your selector
    }).fail(function (data) {
        // take action in case of failure
    });
});

如果您动态加载数据，您可能希望将ajax调用包装在全局函数中。我这样做并传递一个回调函数给我执行完成。这也允许我在失败时向用户提供更全面的错误呈现。

另一个建议是我们正在使用我真正喜欢的引导程序，因为它需要很多JQuery选择器编写方法是使用Observables和MVVM。我们使用bootstrap执行此操作，并使用Bootstrap在我们的单页应用程序中取得了巨大成功。我们正在使用免费版的Kendo UI Web。希望这会有所帮助。

Kendo UI Observable Framework | MVVM in Kendo UI Walkthrough

如何在可折叠内容面板中创建按钮并使内容可见并隐藏在其中？

2 个答案: