Question

我想在boot strap tour的元素标签中使用更多信息（jquery show hide）选项。但是，我注意到jquery脚本不适用于bootstrap tour中的元素。这是我的代码。

$(document).ready(function () {

    $(".popover-content .message").css('display', 'none');
    $("span.readmore").click(function(){
         $(".message").css('display' , 'block');
         $(this).css('display', 'none');
    });

    var tour = new Tour({
        template: "<div class='popover tour'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><nav class='popover-navigation'><div class='btn-group'><button class='btn btn-primary' data-role='prev'>Prev</button><button class='btn btn-primary' data-role='next'>Next</button></div><button class='btn btn-primary btn-end' data-role='end'>End tour</button></nav></div>"
    });  

    // Add your steps. Not too many, you don't really want to get your users sleepy
    tour.addSteps([
    {
        element: "#manage-my-account", // string (jQuery selector) - html element next to which the step popover should be shown
        title: "Title of my step1", // string - title of the popover
        content: "<div>Styles make the formatting job much easier and more efficient.</div><span class='readmore'>Read More...</span><div class='message'>To give an attractive look to web sites, styles are heavily used." +
    "JQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn, but it's easy to implement too. A person must have a" +
    "good knowledge of HTML and CSS and a bit of JavaScript. jQuery is an open source project that provides a wide range of features with cross-platform compatibility. </div>" // string - content of the popover

    },

    {
      element: "#memberhome-app-tile-4",
      title: "Title of my step6",
      content: "Content of my step6"
    }
    ]);

    // Initialize the tour
    tour.init();

    // Start the tour
    tour.start();

});

Answer 1

使用onShown选项编写代码，如下所示：

tour.addSteps([
{
    element: "#manage-my-account", // string (jQuery selector) - html element next to which the step popover should be shown
    title: "Title of my step1", // string - title of the popover
    content: "<div>Styles make the formatting job much easier and more efficient.</div><span class='readmore'>Read More...</span><div class='message'>To give an attractive look to web sites, styles are heavily used." +
             "JQuery is a powerful JavaScript library that allows us to add dynamic elements to our web sites. Not only it is easy to learn, but it's easy to implement too. A person must have a" +
             "good knowledge of HTML and CSS and a bit of JavaScript. jQuery is an open source project that provides a wide range of features with cross-platform compatibility. </div>", // string - content of the popover
    onShown : function(){
        $(".popover-content .message").css('display', 'none');
        $("span.readmore").click(function(){
             $(".message").css('display' , 'block');
             $(this).css('display', 'none');
        });
    }
},

您可以自定义在onShown函数中编写的这一块代码，以便再次隐藏它。

bootstrap tour - 阅读更多

1 个答案: