我有另一个团队成员创建的现有JSON代码，他不再在我们公司工作。我正在尝试使用现有代码，并在每个元素中添加一个下拉列表，以便它可以将用户定向到其他URL或启动我们在另一个网站上托管的文件下载。
关于如何添加下拉菜单的任何想法。
enter code here
<script>
$( document ).ready(function() {
/*********************** START CONFIGURATION SECTION ***********************/
/*** In this section you can setup various parameters that the page will use to render itself.
* This approach should eliminate the need to manually modify HTML and will render all elements consistently.
* To create or edit stories, announcements, etc, you can create new JSON elements in this section, and they
* will auto-magically appear on the page.
*
* NOTE: Strings can contain HTML tags and in-line stiles if desired. Be mindful that if the string has an apostrophe in it, it will break the JSON.
* You need to escape apostrophe by preceeding it with \
* ex: it's <-- will break JSON, instead use --> it\'s
***/
// To display warning message, type something into this string. If you do not want to dispay error message, leave the string clear.
var warningMessage = '';
// This is the ROOT URL and is used to make it easier/shorter to specify which image to use for the stories in navTabs variable. ex: img: rootImgURL+'check-out.jpg'
var rootImgURL = 'https://advantage.iriworldwide.com/CKFinderJava/userfiles/images/gp-power/gp-power/zcs3444/'
// This is the ROOT URL for story builder. When a tile is clicked, story with corresponding ID will be opened in new tab using this URL.
var rootSBURL = 'https://advantage.iriworldwide.com/unify-gp/storybuilder/storyshell.html#/story?stid='
/***
* Configuration parameters for navigation tabs and stories within each.
* storyID: null <-- replace the null with story id you want to open
* tileCaption: Displayed as white text on the tile
* hoverCaption: Displayed when user hovers over the tile. Can be same as tileCaption or blank.
* description: Brief description displayed when user hovers over the tile. Can be same for all tiles (ex: click to view)
* img: name of the image to display for this tile. Works in conjunction with rootImgURL for brievity but can be full path to the image.
**/
var navTabs = [
{name: 'GP Frequently Used', description:'Each IRI model has a unique set of strengths and attributes. Know what you want, click on each model to quickly access reports by model.',
stories: [
{storyID: 69411, tileCaption: 'POS', hoverCaption:'Market Measurement', description: 'Compare GP’s performance to the market', img: rootImgURL+'check-out.jpg'},
{storyID: 69417, tileCaption: 'Panel', hoverCaption:'Shopper Understanding', description: 'IRI’s panel of 100K households to assess shopper’s behavior and trends across the store.', img: rootImgURL+'people-on-couch.jpg'},
{storyID: null, tileCaption: 'ShopperSights', hoverCaption:'Shopper Understanding', description: 'Households linked to stores they are most likely to shop <span style="color: #de2027 !important">(Coming Soon)</span>', img: rootImgURL+'grocery-shopping.jpg'},
{storyID: 69409, tileCaption: 'Loyalty', hoverCaption:'Sales and Shoppers', description: 'Shopper data', img: rootImgURL+'loyalty.jpg'},
{storyID: 70800, tileCaption: 'Supply Chain', hoverCaption:'Supply Chain', description: 'Inventory, sales, shipment forecast and POG information', img: rootImgURL+'truck-on-road.jpg'}]
},
{name: 'GP Category Management', description:'A collaborative set of custom GP approved reports designed for use by Merchants and their Gateway Supplier Partners to understand your business and identify opportunities for growth.',
stories: [
{storyID: 69411, tileCaption: 'Category Management', hoverCaption:'Category Management', description: 'click to analyze', img: rootImgURL +'meeting-2.jpg'},
{storyID: 69417, tileCaption: 'Assortment With Item Rankings', hoverCaption:'Assortment With Item Ranking', description: 'click to analyze', img: rootImgURL +'grocery-shopping.jpg'},
{storyID: 4235, tileCaption: 'Supplier Partner Topline', hoverCaption:'Supplier Partner Topline', description: 'click to analyze', img: rootImgURL +'boardroom.jpg'},
{storyID: 69409, tileCaption: 'Subcategory Management', hoverCaption:'Subcategory Management', description: 'click to analyze', img:rootImgURL +'meeting-3.jpg'},
},
{name: 'IRI Best Practice', description:'Best Practice Content is a suite of core reporting organized into 8 topics that answer frequently asked business questions, highlight opportunities and weaknesses, and provides a holistic view of the business using all available datasets.', style:'grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))',
stories: [
{storyID: 69411, tileCaption: 'Retail Performance', hoverCaption:'Retail Performance', description: 'Understand current performance of key performance metrics, store and item rankings', img: rootImgURL+'performance.jpg'},
{storyID: 69417, tileCaption: 'Supplier Partner Collaboration', hoverCaption:'Supplier Partner Collaboration', description: 'A category review based workflow', img: rootImgURL+'meeting-1.jpg'},
{storyID: 69409, tileCaption: 'Basket & Buyer Insights', hoverCaption:'Basket & Buyer Insights', description: 'Understand key shopper metrics', img: rootImgURL+'people-on-couch.jpg'},
},
}
]
// Team members to be displayed when user clicks on "Support"
var supportTeam = [
{fullName: '', initials: 'DS', title: 'Consultant', email: '',phone:'', img: rootImgURL +'meeting-3.jpg'},
{fullName: '',initials: 'SI',title: 'Analyst Client Service',email: '',phone:'xxx-xxx-xxxx', img: null},
{fullName: '',initials: 'DH',title: 'Team Lead',email: '',phone:'xxx-xxx-xxxx',img: null},
{fullName: 'Technical Suport',initials: 'TS',title: 'Weekdays 6:30am - 7:00pm', email: '',phone: '' ,img: null}
]
var announcements = [
{title:'POS Restatement 31.0', body:'The 31.0 POS restatement activated Monday, 9/16. RMA-CRMAs (regions) have been updated; therefore, slight changes may be observed in the data due to its definitions. Stores closed prior to Nov. 4, 2018 have been removed. Closed stores announced by SEG in Feb., 2019 remain in the model. These stores will be removed during the next restatement, ~Jan., 2020. Select reports may not render data due to the updated RMA/CRMAs. Additional information about the update is on the FileCabinet under 0.1 POS Model. If you need assistance, please reach out to your IRI on-site consultant.'},
]
/*********************** END CONFIGURATION SECTION /***********************/
// DO NOT REMOVE OR MODIFY. THESE ARE USED BY THE PAGE TO TRACK WHICH TILE WAS CLICKED.
var categoryIndex = 0;
var storyIndex = null;
var storyID = null;
// WARNING MESSAGE
if(warningMessage){
// If there is a warning message, replace banner text with content of the warning.
$('.warning-description').html(warningMessage);
$('.warning-container').fadeIn();
}
// Set the hight for slider using 70px as margin offset for header and menu
$('.landing-page-container-slider, .landing-page-slider, .landing-page-slide').height(window.innerHeight - 350 +'px').width(screen.width - 200 +'px');
// Setup tabs and story cards based on metadata provided.
for(i = 0; i < navTabs.length; i++){
$('.nav-menu-container').append('<div '+ (i == 0 ? 'class="selected"': '') +'>'+ navTabs[i].name +'</div>')
$('.landing-page-slider').append('<div class="landing-page-slide">'+
'<div class="container-box"><div class="intro-text">'+ navTabs[i].description +'</div></div>'+
'<div class="container-box" id="stories-tab-'+ i +'" style="'+ (navTabs[i].style ? navTabs[i].style : '') +'"></div></div>');
var slide = $('.landing-page-slider #stories-tab-'+ i);
for(s = 0; s < navTabs[i].stories.length; s++){
slide.append('<div class="story-card">'+
'<div class="story-imgBx">'+
'<img src="'+ navTabs[i].stories[s].img +'">'+
'<h2 class="story-title">'+ navTabs[i].stories[s].tileCaption +'</h2>' +
'</div>' +
'<div class="story-details">' +
' <h2>'+ navTabs[i].stories[s].hoverCaption +'<br><span>'+ navTabs[i].stories[s].description +'</span></h2>' +
'</div>' +
'</div>')
}
}
// Instantiate slider. Give it some timeout for DOM elements to render. Otherwise hight/width does not work and nothing is visible
setTimeout(function(){
$('.landing-page-container-slider').iosSlider({
snapToChildren: true,
infiniteSlider: false,
desktopClickDrag: false
});
}, 100)
// SUPPORT TEAM based on metadata provided.;
for(i = 0; i < supportTeam.length; i++){
$('#support-team').append('<article class="card">' +
'<div class="card-img"></div>' +
'<div class="card-img-hover"><div class="card-initials">'+ supportTeam[i].initials +'</div></div>' +
'<div class="card-info">' +
' <div class="card-role">'+ supportTeam[i].title +'</div>' +
' <div class="card-name">'+ supportTeam[i].fullName +'</div>' +
' <div class="card-contact phone">'+ supportTeam[i].phone +'</div>' +
' <div class="card-contact email"><a href="mailto:'+ supportTeam[i].email +'?Subject=Question">'+ supportTeam[i].email +'</a></div>' +
'</div>' +
'</article>')
}
// ANNOUNCEMENTS based on metadata provided.;
for(i = 0; i < announcements.length; i++){
$('#announcements').append('<div class="section-title">'+ announcements[i].title +'</div>'+
'<div class="section-sub-title"><p>'+ announcements[i].body +'</p></div>')
}
// Setup NAV menu and wire it up to the slides
$('.nav-menu-container div').on('click', function(e){
categoryIndex = $('.nav-menu-container div').index(this);
$('.nav-menu-container div').removeClass('selected');
$('.nav-menu-container div:eq('+ categoryIndex +')').addClass('selected');
$('.landing-page-container-slider').iosSlider('goToSlide', categoryIndex + 1);
});
// CLICK EVENTS
$('.story-card').on('click', function(e){
// When story tile is clicked, figure out which one, based on index, and open corresponding story in new tab
storyIndex = $('#stories-tab-'+ categoryIndex +' .story-card').index(this)
storyID = navTabs[categoryIndex].stories[storyIndex].storyID;
// Only open tab if story ID is specified. Otherwise, do nothing.
if(storyID){
window.open(rootSBURL + storyID, '_blank')
};
});
// Footer click
$('.landing-page-container-footer div').on('click', function(e){
// Figure out which of the two was clicked, open overlay, and make one of the sections visible.
var index = $('.landing-page-container-footer div').index(this);
if(index == 0){
$('.support-container').show();
}else{
$('.announcements-container').show();
}
$('.landing-page-overlay').addClass('open');
});
// Close overlay
$('.landing-page-overlay-close').on('click', function(){
$('.landing-page-overlay').removeClass('open');
$('.support-container, .announcements-container').hide();
})
});
我想在这里添加一个下拉列表
enter code here
{name: 'GP Frequently Used', description:'Each IRI model has a unique set of strengths and attributes. Know what you want, click on each model to quickly access reports by model.',
stories: [
{storyID: 69411, tileCaption: 'POS', hoverCaption:'Market Measurement', description: 'Compare GP’s performance to the market', img: rootImgURL+'check-out.jpg'},
{storyID: 69417, tileCaption: 'Panel', hoverCaption:'Shopper Understanding', description: 'IRI’s panel of 100K households to assess shopper’s behavior and trends across the store.', img: rootImgURL+'people-on-couch.jpg'},
{storyID: null, tileCaption: 'ShopperSights', hoverCaption:'Shopper Understanding', description: 'Households linked to stores they are most likely to shop <span style="color: #de2027 !important">(Coming Soon)</span>', img: rootImgURL+'grocery-shopping.jpg'},
{storyID: 69409, tileCaption: 'Loyalty', hoverCaption:'Sales and Shoppers', description: 'Shopper data', img: rootImgURL+'loyalty.jpg'},
{storyID: 70800, tileCaption: 'Supply Chain', hoverCaption:'Supply Chain', description: 'Inventory, sales, shipment forecast and POG information', img: rootImgURL+'truck-on-road.jpg'}]
},